/*
 * The Cronum Studio brand as design tokens (cronumstudio/brand, tokens.css),
 * with the fonts served from here and the accent of every product.
 *
 * The fonts are the suite's own files, never Google's: loading them from
 * there would tell a third party who opens the app, and the policy is
 * `default-src 'self'`. Latin and Latin Extended cover en, es, fr and de.
 * Geist is variable (100–900); Space Grotesk is its bold, for headings;
 * Geist Mono its regular, for figures and code. Licences: fonts/OFL-*.txt.
 */

@font-face { font-family: 'Geist'; font-weight: 100 900; font-display: swap; src: url(fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-weight: 100 900; font-display: swap; src: url(fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Yolk: Cronum's colour, and "now" inside the apps. Nothing else is yolk. */
  --cr-yolk-300: #FFD95C;
  --cr-yolk-500: #FFC21A;
  --cr-yolk-600: #FFB000;  /* flat, for small sizes */
  --cr-yolk-700: #FFA812;
  --cr-yolk-text: #9A6500; /* yolk as text on white: 4.96:1 */
  --cr-yolk-gradient: linear-gradient(135deg, var(--cr-yolk-300) 0%, var(--cr-yolk-500) 55%, var(--cr-yolk-700) 100%);

  --cr-ink: #16130E;
  --cr-cream: #FFF7E6;
  --cr-stone: #7A7064;
  --cr-stone-dark: #B8AE9F;
  --cr-line: #E4DCCD;

  /* The products: the colour of each icon. */
  --cr-product-tasks: #EF4B2A;
  --cr-product-projects: #C2389E;
  --cr-product-next: #0A8FB8;
  --cr-product-focus: #0F9D6E;
  --cr-product-notes: #7C3AED;
  --cr-product-tracker: #3A4660;
  --cr-product-papatalk: #E0457B;

  --cr-font-display: 'Space Grotesk', system-ui, sans-serif;
  --cr-font-text: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cr-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

/*
 * The accent of each product, by the app's id on <html data-app="…">. The
 * icon's colour is the accent when white text reads on it and it reads as a
 * link on the page's ground (4.5:1 both); when it doesn't, a deeper step of
 * the same hue. In the dark, a light step with ink
 * on it, which also reads as a link on the dark ground. The tests measure
 * every pair. An app outside this list sets --app (and --app-accent…) itself.
 */
:root[data-app="tasks"]    { --app: #EF4B2A; --app-accent: #CC3718; --app-on: #FFFFFF; --app-accent-dark: #F0694B; --app-on-dark: #16130E; }
:root[data-app="projects"] { --app: #C2389E; --app-accent: #B0308E; --app-on: #FFFFFF; --app-accent-dark: #E67FCB; --app-on-dark: #16130E; }
:root[data-app="next"]     { --app: #0A8FB8; --app-accent: #0A789E; --app-on: #FFFFFF; --app-accent-dark: #5CC3E4; --app-on-dark: #0A1A21; }
:root[data-app="focus"]    { --app: #0F9D6E; --app-accent: #0B7A55; --app-on: #FFFFFF; --app-accent-dark: #4CC99A; --app-on-dark: #0B1F17; }
:root[data-app="notes"]    { --app: #7C3AED; --app-accent: #7C3AED; --app-on: #FFFFFF; --app-accent-dark: #A98BF5; --app-on-dark: #16130E; }
:root[data-app="tracker"]  { --app: #3A4660; --app-accent: #3A4660; --app-on: #FFFFFF; --app-accent-dark: #9AA6C4; --app-on-dark: #12151C; }
:root[data-app="papatalk"] { --app: #E0457B; --app-accent: #C42E63; --app-on: #FFFFFF; --app-accent-dark: #F27FA6; --app-on-dark: #1E0B12; }