/* TFAdmin design tokens — the only file allowed to declare raw values.
   Light is the default; dark is derived here and nowhere else. */
/* WHAT THE BROWSER DRAWS ITSELF.
   Our fields are themed by the tokens below; the parts inside them that the
   browser owns -- the date field's calendar icon, the time field's spinner, the
   popup those open, a select's menu, autofill's yellow, the scrollbars -- are
   not, and take their colours from this one declaration. Without it a dark page
   carried light-chrome controls: a date box whose icon was a dark glyph on a
   dark field, and a picker that opened white. It is stamped explicitly for both
   themes because the app sets data-theme explicitly for both. */
:root { color-scheme: light; }
[data-theme="dark"] {
  color-scheme: dark; }

:root {
  --tf-brand: #f2b705;            /* logo / brand surfaces only */
  --tf-brand-ink: #1c1a14;

  /* Interactive accent — deep navy (client pick, light mode) */
  --tf-accent: #1e3a5f;
  --tf-accent-strong: #162c48;    /* hover / pressed */
  --tf-accent-weak: #e6eaf2;      /* active nav tint, chip fill */
  --tf-accent-fg: #ffffff;        /* text on solid accent */

  --tf-bg: #f6f7f8;
  --tf-surface: #ffffff;
  --tf-surface-raised: #ffffff;
  --tf-border: #e4e6e9;
  --tf-border-strong: #cfd3d8;

  --tf-fg: #14181d;
  --tf-fg-muted: #5b6472;
  --tf-fg-subtle: #5b6472;   /* was #8b949e — 2.87:1 on --tf-bg, below AA at the 11px it is used at */

  --tf-success: #166534; --tf-success-bg: #dcfce7;
  /* Text ON a solid --tf-success fill. It has to flip with the theme: the light
     value is a dark green that carries white at 8:1, the dark value is a mint
     that carries white at 1.40:1 — a label you cannot read. */
  --tf-success-fg: #ffffff;
  --tf-danger-fg: #ffffff;        /* text on solid danger, the pair --tf-success-fg already had */
  --tf-warning: #92400e; --tf-warning-bg: #fef3c7;
  /* AMBER AT GRAPHIC WEIGHT. --tf-warning is tuned for TEXT -- #92400e is
     6.6:1 on the page, which is what a warning sentence needs and what turns
     a 3px rule brown. A rule is chrome: 3:1 is the bar, and being legibly
     AMBER matters more than being dark, because its job is to be told apart
     from the green rule above it and the red one below. 3.7:1 and orange.
     Use it for bars, rules and swatches; never for words. */
  --tf-warning-line: #c2670b;
  --tf-danger:  #b91c1c; --tf-danger-bg:  #fee2e2;
  --tf-info:    #1e3a5f; --tf-info-bg:    #e6eaf2;

  --tf-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tf-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* TEXT SIZE — one knob. Change --tf-text-scale only; every step follows.
     1 = default (body 14px) · 1.07 ≈ body 15px · 1.15 ≈ body 16px · 0.93 ≈ body 13px.
     Never edit the six steps individually, and never set a size in a feature file. */
  --tf-text-scale: 1;

  --tf-text-display: calc(28px * var(--tf-text-scale));  --tf-leading-display: 1.15;
  --tf-text-title: calc(20px * var(--tf-text-scale));    --tf-leading-title: 1.2;
  --tf-text-subtitle: calc(16px * var(--tf-text-scale)); --tf-leading-subtitle: 1.35;
  --tf-text-body: calc(14px * var(--tf-text-scale));     --tf-leading-body: 1.5;
  --tf-text-small: calc(13px * var(--tf-text-scale));    --tf-leading-small: 1.45;
  --tf-text-micro: calc(11px * var(--tf-text-scale));    --tf-leading-micro: 1.3;
  --tf-weight-normal: 400;  --tf-weight-medium: 500;

  --tf-space-1: 4px; --tf-space-2: 8px;  --tf-space-3: 12px; --tf-space-4: 16px;
  --tf-space-5: 24px; --tf-space-6: 32px; --tf-space-7: 48px;

  --tf-radius-sm: 6px; --tf-radius-md: 10px; --tf-radius-lg: 14px;


  /* The two hands on a performance sheet: the STUDENT's reading and the
     review's own. Orange and green, and they are the same pair in the chart
     ink, the dialog cards and the key -- which is why they are tokens and not
     three copies of a hex. The answer badge rides on the end of the green line
     and needs its own value in dark, where the line colour would not carry a
     white figure. */
  --tf-perf-student: #c8501f;
  --tf-perf-sys: #1f7a5a;
  --tf-perf-sys-badge: #1f7a5a;
  --tf-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 0 0 1px var(--tf-border);
  --tf-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.10), 0 0 0 1px var(--tf-border);
  --tf-shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.18), 0 0 0 1px var(--tf-border);

  --tf-sidebar-w: 232px;
  --tf-sidebar-w-collapsed: 64px;
  --tf-page-max: 1180px;
  --tf-control-h: 36px;
  --tf-control-h-sm: 28px;

  /* ----------------------------------------------------------- phone / touch
     A phone is a supported width (UI standard, rule 8) and these measurements
     do not fall out of the desktop scale.

     --tf-tap-min   the floor for a control under a coarse pointer. 36px
                    (--tf-control-h) is a mouse target; a thumb needs 44.
     --tf-tick-touch  a checkbox or radio a finger can hit. The browser's own
                    is ~13px, which is fine beside a mouse and not fine in a
                    list of them on a phone.
     --tf-safe-b    the strip the home indicator sits in, below the page. It
                    resolves to 0px on everything that has no such strip, so
                    it can be added unconditionally.
     --tf-gutter-phone  the side margin of a phone screen. One value, so the
                    nesting (viewport → page → module → card) can be collapsed
                    to a single gutter instead of paying four of them.
     --tf-ac-mark-sm  the aircraft type mark on a phone row. The 44px of
                    --ac-mark is a third of a phone's width before the title
                    has had any; see the artwork note in the UI standard — it
                    is still the drawing, just smaller. */
  --tf-tap-min: 44px;
  --tf-tick-touch: 20px;
  --tf-safe-b: env(safe-area-inset-bottom, 0px);
  --tf-gutter-phone: 12px;
  --tf-ac-mark-sm: 34px;

  /* ---------------------------------------------------------------- motion
     One vocabulary, so a duration is chosen from a scale rather than typed.
     Before this there were eight durations and four bezier curves across four
     stylesheets, most of them one-offs.

     Durations. Everything a person waits on stays inside 320ms; the last two
     are not UI response, they are a chart drawing itself and a placeholder
     breathing.
       1  hover, colour, borders — the things that should feel instant
       2  the default for anything that moves a little
       3  overlays, drawers, panels
       4  something crossing the screen
       5  a page arriving

     Easing, by what the motion IS (not by taste):
       ease         hover and colour, where nothing travels
       ease-out     entering and exiting — fast first, so feedback is immediate
       ease-in-out  moving or morphing on screen, where both ends need settling

     ease-in is deliberately absent. It starts slow, which reads as lag on
     anything the user just did. */
  --tf-dur-1: 120ms;
  --tf-dur-2: 150ms;
  --tf-dur-3: 200ms;
  --tf-dur-4: 250ms;
  --tf-dur-5: 320ms;
  --tf-dur-chart: 600ms;
  --tf-dur-loop: 1400ms;

  --tf-ease: ease;
  --tf-ease-out: cubic-bezier(.2, .8, .2, 1);
  --tf-ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* The pre-existing shorthand, kept because four rules already use it, now
     expressed in the scale rather than beside it. */
  --tf-transition: var(--tf-dur-1) var(--tf-ease);
}

[data-theme="dark"] {
  --tf-perf-sys: #4cc39a;
  --tf-perf-sys-badge: #2f7f63;
  --tf-accent: #5b9bff;
  --tf-accent-strong: #7fb2ff;
  --tf-accent-weak: #16233a;
  --tf-accent-fg: #0b0f14;

  --tf-bg: #0d1117;
  --tf-surface: #151b23;
  --tf-surface-raised: #1b222c;
  --tf-border: #232b36;
  --tf-border-strong: #313b48;

  --tf-fg: #e6e9ee;
  --tf-fg-muted: #9aa4b2;
  --tf-fg-subtle: #9aa4b2;   /* was #6b7482 — 3.67:1 on dark surface, below AA */

  --tf-success: #86efac; --tf-success-bg: #10281b;
  --tf-success-fg: #06281a;
  --tf-danger-fg:  #2a0d0d;      /* 8.3:1 on the dark danger surface; white would be 1.9:1 */
  --tf-warning: #fcd34d; --tf-warning-bg: #2a1f0a;
  --tf-warning-line: #fcd34d;   /* already bright on a dark ground; one name, both themes */
  --tf-danger:  #fca5a5; --tf-danger-bg:  #2a1213;
  --tf-info:    #93c5fd; --tf-info-bg:    #10203a;

  --tf-shadow-sm: 0 0 0 1px var(--tf-border);
  --tf-shadow-md: 0 0 0 1px var(--tf-border), 0 6px 18px rgba(0, 0, 0, 0.5);
  --tf-shadow-lg: 0 0 0 1px var(--tf-border-strong), 0 18px 44px rgba(0, 0, 0, 0.6);
}

/* Optional: let a user pick their own text size (Settings), persisted by app.js
   as <html data-text-size="large">. Controls keep their own heights, so only
   type grows — no layout rewrite needed. */
[data-text-size="small"]  { --tf-text-scale: 0.93; }
[data-text-size="large"]  { --tf-text-scale: 1.07; }
[data-text-size="xlarge"] { --tf-text-scale: 1.15; }