/* Studytutor's one theme: the colours, type, shapes and shadows every page uses: the public site (site.css), sign-in
   (signin.css), the tutor and the admin panel (style.css). Those stylesheets say what things look like using only
   these names; a colour written anywhere else is a test failure (test/theme.test.ts). The rules, with examples, are in
   docs/style-guide.md.

   Colours come from the logo: navy #0a1a45, blue #0060f0, gold #f5a623 (the tassel). No purple, anywhere.
   Every text pairing here is WCAG AA (4.5:1) or better; field edges are 3:1.
   Light is the default. A page opts in to following the device's dark setting with <html data-scheme="auto"> (the
   public pages do; the tutor and the admin panel don't yet).

   This file is served at /site/theme.css by the public server and at /theme.css by the others (src/brand.ts), with
   the font beside it in fonts/, so the url()s below are relative. */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  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: "Figtree";
  src: url("fonts/figtree-italic.woff2") format("woff2");
  font-weight: 300 900; font-style: italic; font-display: swap;
  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 {
  color-scheme: light;

  /* ---- type ---- */
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-text);   /* headings: weight 800, letter-spacing -.025em */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- the logo's colours, for art and gradients; everything else uses the roles below ---- */
  --navy: #0a1a45;
  --blue: #0060f0;
  --blue-deep: #0b3c9f;
  --blue-bright: #0a8cff;
  --gold: #f5a623;           /* fills, markers, stickers and dark-mode text ONLY (2.0:1 on white) */
  --sky: #7cc4ff;

  /* ---- surfaces ---- */
  --bg: #ffffff;             /* the public pages' background */
  --soft: #f4f7fd;           /* the app's canvas, bands, quiet fills, the tutor's messages */
  --sunken: #eef2fa;         /* tiles and tracks inside a card */
  --surface: #ffffff;        /* cards, sheets, panes, fields */
  --border: #e1e7f2;         /* dividers and card edges */
  --field: #7d89a8;          /* form field and control edges: 3.5:1 on white */

  /* ---- text ---- */
  --text: #0a1a45;           /* navy, 16.9:1 */
  --muted: #4a5578;          /* 7.3:1 on white, 6.5:1 on the soft fills */
  --ink: #0a1a45;            /* text on gold and sky, in both schemes (8.3:1 and 9:1) */

  /* ---- the accent: actions, links, the student's own messages ---- */
  --accent: #0060f0;         /* 5.3:1 on white, and white on it */
  --accent-strong: #004fcc;  /* hover */
  --accent-soft: #e8f1ff;    /* information, the AI line, selected things */
  --accent-ink: #0050d0;     /* text on accent-soft, 6.0:1 */
  --on-accent: #ffffff;
  --button-edge: #0a1a45;    /* the big button's raised edge */

  /* ---- meaning ---- */
  --warm: #fff6e0;           /* check this: warnings, the photo rule, helplines */
  --warm-border: #efcd76;
  --warm-ink: #6b4500;       /* 7.9:1 on warm */
  --danger: #c0262d;         /* errors and things that can't be undone: 5.9:1 on white, 5.2:1 on danger-soft */
  --danger-soft: #fdeeed;
  --on-danger: #ffffff;
  --danger-border: #f2c0bd;
  --success: #eaf3ff;        /* done: blue, not green (the brand has no green) */
  --success-border: #9cc6ff;
  /* Progress levels only (secure, getting there, needs work): the one place green appears. */
  --level-good: #157a46;     /* 5.4:1 on white */
  --level-mid: #f5a623;      /* a dot, outlined in level-mid-ink */
  --level-mid-ink: #8a5600;  /* 6.2:1 on white */
  --level-low: #c0262d;

  /* ---- shape ---- */
  --r-xs: 6px;               /* code, small images */
  --r-sm: 10px;              /* notes inside cards, tiles */
  --r-md: 14px;              /* fields, messages, small cards, the big button (16px) */
  --r-lg: 22px;              /* cards and sheets */
  --r-xl: 28px;              /* the one hero card on a page */
  --r-pill: 999px;           /* buttons, chips, tabs, badges */

  /* ---- depth ---- */
  --card-shadow: 0 1px 2px rgba(10, 26, 69, .05);
  --shadow: 0 1px 2px rgba(10, 26, 69, .06), 0 18px 40px -18px rgba(0, 72, 200, .28);
  --sheet-shadow: 0 -8px 30px rgba(10, 26, 69, .16);
  --dialog-shadow: 0 2px 6px rgba(10, 26, 69, .08), 0 24px 60px -16px rgba(10, 26, 69, .35);
  --backdrop: rgba(10, 26, 69, .45);
  --pane-shadow: 0 -10px 24px -14px rgba(10, 26, 69, .35);   /* a pane pinned to the bottom of the screen */
  --sticker-edge: rgba(5, 12, 38, .35);   /* under the gold Beta sticker */
  --art-dots: rgba(255, 255, 255, .17);   /* the dot grid on the navy-to-blue art strip */
  --art-shadow: rgba(3, 8, 30, .45);      /* under the mascot on that strip */
  --glow-a: rgba(10, 140, 255, .12);   /* the two soft lights behind a page's top corners */
  --glow-b: rgba(245, 166, 35, .14);
}

:root[data-scheme="auto"] { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root[data-scheme="auto"] {
    --bg: #0b1230;           /* navy, like the dark logo's own background */
    --soft: #0f1838;
    --sunken: #0d1534;
    --surface: #142047;
    --border: #26335f;
    --field: #7684b3;        /* 4.3:1 on surface */
    --text: #eef2ff;
    --muted: #a9b4d6;        /* 7.6:1 on surface */
    --accent: #4da3ff;
    --accent-strong: #7dbbff;
    --accent-soft: #16285a;
    --accent-ink: #b9d9ff;
    --on-accent: #0a1a45;    /* 6.4:1 on #4da3ff */
    --button-edge: #0060f0;
    --warm: #2a2311;
    --warm-border: #6d5720;
    --warm-ink: #f3d58a;
    --danger: #ff8f8f;
    --danger-soft: #3a1518;
    --on-danger: #0a1a45;
    --danger-border: #7a2c30;
    --success: #13264d;
    --success-border: #2d5aa8;
    --level-good: #6fd39b;
    --level-mid-ink: #f5c060;
    --level-low: #ff8f8f;
    --glow-a: rgba(10, 140, 255, .22);
    --glow-b: rgba(245, 166, 35, .07);
    --card-shadow: none;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 48px -20px rgba(0, 0, 0, .7);
  }
}