/* THEME: every color, font and shape of the app comes from these tokens (the
   same values are in design-tokens.json; the reasoning is in docs/DESIGN.md).
   The identity is Skillture's (skillture.club): cyan on ink, teal-tinted paper,
   Readex Pro with Baloo Bhaijaan 2 headings, a highlighter mark and line motifs.
   To re-skin, change the values below, brand.js and assets/logo.svg. */

/* Both families are variable fonts (one file per script, every weight) and cover
   Arabic, so the identity holds when Arabic ships. The Arabic files are only
   downloaded by pages that show Arabic text (unicode-range). */
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/fonts/readex-pro-latin-wght.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: "Readex Pro"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/fonts/readex-pro-arabic-wght.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Baloo Bhaijaan 2"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/baloo-bhaijaan-2-latin-wght.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: "Baloo Bhaijaan 2"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/baloo-bhaijaan-2-arabic-wght.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  color-scheme: light dark;

  /* brand: teal you can read (buttons, links) + the Skillture cyan (the mark, the timer, the ink bands) */
  --brand: #007A7A;          /* primary buttons, links, active navigation */
  --brand-strong: #005F5F;   /* hover / pressed */
  --brand-ink: #FFFFFF;      /* text on --brand */
  --brand-soft: #EAF6F6;     /* tinted backgrounds, selected states */
  --accent: #00CCCC;         /* the highlighter mark, the timer, the logo: never text on a light page */
  --accent-ink: #050909;     /* text on --accent */
  --btn: #050909;            /* the primary button: ink, as on skillture.club */
  --btn-hover: #1A2828;
  --btn-ink: #FFFFFF;

  /* the ink band: the one dark surface on a light page (check-in action, promise) */
  --ink: #050909;
  --on-ink: #F1F8F8;
  --on-ink-muted: #B0C4C4;
  --ink-line: #2C4343;

  /* surfaces and text: teal-tinted paper, near-black ink */
  --bg: #F3FAFA;
  --surface: #FFFFFF;
  --surface-2: #E6F4F4;
  --line: #CFE3E3;
  --line-strong: #6F9A9A;    /* the edge of things you type in or switch (3:1 on white) */
  --text: #050909;
  --muted: #435B5B;

  /* status: kept apart from the brand color, so "checked in" never reads as decoration */
  --ok: #0B7A4B;    --ok-soft: #E7F2ED;
  --warn: #8A5300;  --warn-soft: #F6EFE4;
  --bad: #B42318;   --bad-soft: #F9EDED;
  --on-status: #FFFFFF;      /* text on a filled --ok / --bad (buttons, toasts) */

  /* shape: 8-px controls inside 16-px cards */
  --radius: 16px;            /* cards, dialogs */
  --radius-sm: 8px;          /* buttons, inputs, list rows */
  --radius-xs: 6px;          /* chips inside rows, thumbnails */
  --shadow: 0 1px 2px rgb(5 9 9 / .05);                          /* resting: border does the work */
  --shadow-raised: 0 18px 40px -18px rgb(5 9 9 / .45), 0 2px 6px rgb(5 9 9 / .06);  /* menus, dialogs */

  /* type: Readex Pro for reading, Baloo Bhaijaan 2 for headings and big numbers */
  --font: "Readex Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Naskh Arabic", Arial, sans-serif;
  --font-display: "Baloo Bhaijaan 2", "Readex Pro", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #00CCCC;
    --brand-strong: #26E0E0;
    --brand-ink: #050909;
    --brand-soft: #092B2B;
    --accent: #00CCCC;
    --accent-ink: #050909;
    --btn: #00CCCC;
    --btn-hover: #26E0E0;
    --btn-ink: #050909;
    --ink: #111B1B;
    --on-ink: #F1F8F8;
    --on-ink-muted: #A9C0C0;
    --ink-line: #2C4343;
    --bg: #050909;
    --surface: #0A1111;
    --surface-2: #141F1F;
    --line: #233636;
    --line-strong: #4A6B6B;
    --text: #F1F8F8;
    --muted: #88A2A2;
    --ok: #2FD58A;   --ok-soft: #0F2C22;
    --warn: #FBBF24; --warn-soft: #2C2914;
    --bad: #FF4040;  --bad-soft: #311919;
    --on-status: #050909;
    --shadow: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-raised: 0 18px 40px -18px rgb(0 0 0 / .8), 0 2px 6px rgb(0 0 0 / .35);
  }
}