/* Pavithra Classes design tokens: one set of colours, type and shape for the staff site (and, later, the student
   site and admin). Brand colours come from the logo: navy #21395a, orange #e85225.
   Every text colour pair passes WCAG AA (4.5:1) in both themes. The logo orange is only for the logo, focus rings
   and small marks: with white text it is 3.7:1, so text and buttons use --accent (#c8461c, 4.8:1).
   Performance colours: --good (green), --close (orange: close to target or needs action), --poor (red). Always show
   them with an icon or a word, never colour alone. */

/* Figtree (SIL Open Font Licence, static/fonts/Figtree-OFL.txt), self-hosted: no font requests leave the site. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/figtree-latin.202cfb54d4e6.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: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.eca8d8b337ff.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --font: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, Consolas, "SF Mono", monospace;

  /* Surfaces and text */
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --ink: #13203a;
  --muted: #55627a;
  --line: #dfe5ee;
  --chip-bg: #e9edf3;

  /* The navy sidebar / bar: text on it always uses these, never --link */
  --bar-bg: #1c3150;
  --bar-ink: #ffffff;
  --bar-ink-2: #d3dceb;
  --bar-hover: rgba(255, 255, 255, .08);
  --bar-active: rgba(232, 82, 37, .22);
  --bar-line: rgba(255, 255, 255, .16);

  /* Brand and actions */
  --brand-navy: #21395a;
  --brand-orange: #e85225;
  --primary: #21395a;
  --primary-hover: #2c4a72;
  --primary-ink: #ffffff;
  --accent: #c8461c;
  --accent-hover: #b03d18;
  --accent-ink: #ffffff;
  --link: #1f5fa8;
  --focus: #e85225;

  /* Performance and status */
  --good: #176b3d;
  --close: #b54708;
  --poor: #b42318;
  --poor-ink: #ffffff; /* text on a red (danger) button */
  --info: #2a78d6;

  /* Fee summary bar (validated for colour-blind separation; every segment is also named in the legend) */
  --seg-paid: #1d7a46;
  --seg-waived: #2a78d6;
  --seg-overdue: #c4321f;
  --seg-track: #dde3ea;

  /* Subject tints: background + text pairs (the name is always written; colour is only a cue) */
  --sj-default: #e3e8ef;          --sj-default-ink: #26344a;
  --sj-physics: #dbe8fb;          --sj-physics-ink: #1d4a86;
  --sj-chemistry: #fde6d2;        --sj-chemistry-ink: #8a3a0e;
  --sj-mathematics: #e8e1f8;      --sj-mathematics-ink: #4b3596;
  --sj-biology: #d8f1e0;          --sj-biology-ink: #1e6a3c;
  --sj-computer-science: #f9dbe6; --sj-computer-science-ink: #8a2050;
  --sj-science: #d4f0f0;          --sj-science-ink: #155e63;

  /* Shape */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(19, 32, 58, .05), 0 4px 12px rgba(19, 32, 58, .06);
}

/* Dark colours: when the person picked Dark (data-theme="dark" on <html>, set by the switch in the sidebar), or when
   they left it on System and the device is in dark mode. Pages marked <html class="light-only"> (the WhatsApp images)
   always stay light. Both blocks hold the same values: keep them in step. */
:root[data-theme="dark"]:not(.light-only) {
  color-scheme: dark;
  --bg: #0c121b;
  --surface: #151d29;
  --surface-2: #1a2331;
  --ink: #e7ecf3;
  --muted: #9ba8ba;
  --line: #253042;
  --chip-bg: #222c3b;

  --bar-bg: #101a28;
  --bar-ink: #f1f4f8;
  --bar-ink-2: #c3cdda;
  --bar-hover: rgba(255, 255, 255, .06);
  --bar-active: rgba(255, 138, 92, .16);
  --bar-line: rgba(255, 255, 255, .12);

  --primary: #9dbbe3;
  --primary-hover: #b6cdec;
  --primary-ink: #0c121b;
  --accent: #ff8a5c;
  --accent-hover: #ffa07a;
  --accent-ink: #1a0f08;
  --link: #8cb8ef;

  --good: #5cc98c;
  --close: #f5a142;
  --poor: #ff8a80; --poor-ink: #1a0f0e;
  --info: #6aa7f0;

  --seg-paid: #2f9259;
  --seg-waived: #3987e5;
  --seg-overdue: #e0544a;
  --seg-track: #2a3647;

  --sj-default: #243042;          --sj-default-ink: #d3dbe6;
  --sj-physics: #1d3150;          --sj-physics-ink: #a9c9f5;
  --sj-chemistry: #3f2a1d;        --sj-chemistry-ink: #f6bf95;
  --sj-mathematics: #2e2848;      --sj-mathematics-ink: #c9bcf4;
  --sj-biology: #1b3a2a;          --sj-biology-ink: #9fdcb4;
  --sj-computer-science: #3d1f2c; --sj-computer-science-ink: #f3b3cb;
  --sj-science: #173a3c;          --sj-science-ink: #93dcdc;

  --shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light-only) {
    color-scheme: dark;
    --bg: #0c121b;
    --surface: #151d29;
    --surface-2: #1a2331;
    --ink: #e7ecf3;
    --muted: #9ba8ba;
    --line: #253042;
    --chip-bg: #222c3b;

    --bar-bg: #101a28;
    --bar-ink: #f1f4f8;
    --bar-ink-2: #c3cdda;
    --bar-hover: rgba(255, 255, 255, .06);
    --bar-active: rgba(255, 138, 92, .16);
    --bar-line: rgba(255, 255, 255, .12);

    --primary: #9dbbe3;
    --primary-hover: #b6cdec;
    --primary-ink: #0c121b;
    --accent: #ff8a5c;
    --accent-hover: #ffa07a;
    --accent-ink: #1a0f08;
    --link: #8cb8ef;

    --good: #5cc98c;
    --close: #f5a142;
    --poor: #ff8a80; --poor-ink: #1a0f0e;
    --info: #6aa7f0;

    --seg-paid: #2f9259;
    --seg-waived: #3987e5;
    --seg-overdue: #e0544a;
    --seg-track: #2a3647;

    --sj-default: #243042;          --sj-default-ink: #d3dbe6;
    --sj-physics: #1d3150;          --sj-physics-ink: #a9c9f5;
    --sj-chemistry: #3f2a1d;        --sj-chemistry-ink: #f6bf95;
    --sj-mathematics: #2e2848;      --sj-mathematics-ink: #c9bcf4;
    --sj-biology: #1b3a2a;          --sj-biology-ink: #9fdcb4;
    --sj-computer-science: #3d1f2c; --sj-computer-science-ink: #f3b3cb;
    --sj-science: #173a3c;          --sj-science-ink: #93dcdc;

    --shadow: none;
  }
}