/* ==========================================================================
   Tempus design tokens, shared with the display's own setup GUI.

   Source: the firmware's embedded dashboard and wizard,
   SchoolCareClock_S3/httpsrv.cpp at v0.5 (commits 6d230f1 and 246727e;
   STYLE_CSS is identical in both). Line numbers
   below are in that file. dev/branding/extract_setup_gui.py pulls the same
   pages out as static HTML for side-by-side comparison.

   The setup GUI is dark-only. It is the reference theme here; the light
   theme is derived for the manager (a desk tool used in daylight offices)
   and has no firmware counterpart.

   Accessibility adjustments (WCAG 2.2 AA), kept minimal and marked ADJ:
     - fg-3 #5a6168 is 3.04:1 on bg-1 (help / meta text, httpsrv.cpp:210),
       below 4.5:1. Lifted to #858c93 (5.61:1 on bg-1, 4.76:1 on bg-3).
     - line #262d34 (httpsrv.cpp:206) is 1.37:1: fine for decorative
       separators, too faint for a control's boundary (1.4.11 needs 3:1).
       Controls use the new --control (#5f6975, 3.2:1 on bg-2).
     - Light theme: the amber fill is 1.81:1 against white, so filled amber
       controls carry an --accent-text border (6.39:1) in light mode.
     - The firmware removes focus outlines (outline: 0, httpsrv.cpp:466);
       the manager keeps a visible 2px focus ring (--focus).
   ========================================================================== */

/* Fonts: vendored, no runtime requests (the Pi's internet is firewalled).
   The firmware @imports these from Google Fonts (httpsrv.cpp:199).
   Both are SIL OFL 1.1; licences in fonts/. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root {
  /* ---- typography (httpsrv.cpp:218-219, 229-230) ---- */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-base: 14px;          /* body 14px / 1.5 (httpsrv.cpp:229-230) */
  --leading: 1.5;
  /* Labels, tabs, buttons: mono, uppercase, tracked (httpsrv.cpp:328-331, 427-431, 663-666) */
  --label-size: 11px;
  --label-track: .08em;
  --btn-size: 12px;
  --btn-track: .06em;
  --brand-size: 18px;         /* wordmark "TEMPUS/SC" (httpsrv.cpp:263-273, 2334) */
  --brand-track: .04em;

  /* ---- geometry: "sharp, appliance-ish" (httpsrv.cpp:197) ---- */
  --radius-1: 1px;            /* inputs, buttons, pills (httpsrv.cpp:301, 465, 668) */
  --radius-2: 2px;            /* cards, dropzone (httpsrv.cpp:384, 952) */
  --radius-modal: 8px;        /* modal only (httpsrv.cpp:1007) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;            /* card-head gap (httpsrv.cpp:393) */
  --space-4: 14px;            /* field spacing (httpsrv.cpp:422) */
  --space-5: 18px;            /* card padding (httpsrv.cpp:385) */
  --space-6: 24px;            /* page padding (httpsrv.cpp:251, 348) */
  --control-pad: 8px 10px;    /* inputs (httpsrv.cpp:462) */
  --btn-pad: 9px 14px;        /* buttons (httpsrv.cpp:667) */

  /* ---- colour: dark, the firmware's own (httpsrv.cpp:201-217) ---- */
  --bg-0: #07090a;            /* page (httpsrv.cpp:202) */
  --bg-1: #0d1012;            /* topbar, cards (203) */
  --bg-2: #14181c;            /* inputs, pills (204) */
  --bg-3: #1c2126;            /* hover / focus fill (205) */
  --line: #262d34;            /* separators, decorative (206) */
  --line-2: #353d46;          /* button borders (207) */
  --control: #5f6975;         /* ADJ: control boundaries at 3:1 */
  --fg-0: #f1f3f5;            /* text (208) */
  --fg-1: #c4cad0;            /* secondary text (209) */
  --fg-2: #8b9298;            /* labels (210) */
  --fg-3: #858c93;            /* ADJ: was #5a6168 (211), 3.04:1 */
  --accent: #ffb13c;          /* sodium amber (212) */
  --accent-2: #ffcd6b;        /* hover (213) */
  --accent-dim: rgba(255,177,60,.18);   /* (214) */
  --accent-text: #ffb13c;     /* amber used as text on the page */
  --accent-ink: #07090a;      /* text on an amber fill: 11.0:1 (httpsrv.cpp:677) */
  --ok: #4ade80;              /* (215) */
  --ok-text: #4ade80;
  --ok-dim: rgba(74,222,128,.14);
  --warn: #facc15;            /* (216) */
  --bad: #f87171;             /* (217) */
  --bad-ink: #07090a;         /* text on a red fill: 7.2:1 (httpsrv.cpp:691) */
  --bad-dim: rgba(248,113,113,.12);     /* alert card tint (httpsrv.cpp:415) */
  --focus: #ffcd6b;
  --scrim: rgba(0,0,0,.62);   /* modal backdrop (httpsrv.cpp:999) */
  --led-bg: #0d1114;          /* LED panel preview, both themes */
  color-scheme: dark;
}

/* ---- light, derived for the manager ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-0: #eef0f2; --bg-1: #ffffff; --bg-2: #f5f6f7; --bg-3: #e6e9ec;
    --line: #d5dade; --line-2: #c3c9cf; --control: #7b848c;
    --fg-0: #0d1012; --fg-1: #2d343b; --fg-2: #4f575f; --fg-3: #5d656d;
    --accent: #ffb13c; --accent-2: #ffc15e; --accent-dim: rgba(255,177,60,.22);
    --accent-text: #8a5200; --accent-ink: #07090a;
    --ok: #1f9d55; --ok-text: #157a3a; --ok-dim: rgba(31,157,85,.12);
    --warn: #a16207; --bad: #b3261e; --bad-ink: #ffffff; --bad-dim: rgba(179,38,30,.08);
    --focus: #1d5fd1; --scrim: rgba(16,22,28,.38);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg-0: #eef0f2; --bg-1: #ffffff; --bg-2: #f5f6f7; --bg-3: #e6e9ec;
  --line: #d5dade; --line-2: #c3c9cf; --control: #7b848c;
  --fg-0: #0d1012; --fg-1: #2d343b; --fg-2: #4f575f; --fg-3: #5d656d;
  --accent: #ffb13c; --accent-2: #ffc15e; --accent-dim: rgba(255,177,60,.22);
  --accent-text: #8a5200; --accent-ink: #07090a;
  --ok: #1f9d55; --ok-text: #157a3a; --ok-dim: rgba(31,157,85,.12);
  --warn: #a16207; --bad: #b3261e; --bad-ink: #ffffff; --bad-dim: rgba(179,38,30,.08);
  --focus: #1d5fd1; --scrim: rgba(16,22,28,.38);
  color-scheme: light;
}