/* =============================================================================
   T-500 — the design system, in three layers.
   This is the ONLY file in the solution allowed to contain a literal colour,
   spacing or radius value. A stylelint rule fails the build on any other.
   ========================================================================== */

/* --- LAYER 1: primitives. Raw values. No component reads these. -----------

   Neutrals are cool rather than green. The old set separated the page from a
   card by two per cent, so nothing lifted and a hundred-row grid read as mush;
   these give the canvas a visible step down from the surfaces sitting on it. */
:root {
  --l-bg: #eceff3;         --l-surface: #ffffff;   --l-surface-2: #e2e7ed;  --l-surface-3: #d3dae2;
  --l-line: #c9d2db;       --l-line-2: #e5eaef;
  --l-ink: #101a22;        --l-ink-2: #3b4956;     --l-ink-3: #64727e;
  --l-on-accent: #ffffff;
  --l-pos: #0b6e52;        --l-warn: #9a5a05;      --l-neg: #ab2c1f;        --l-info: #39597a;

  --d-bg: #0d1116;         --d-surface: #151b22;   --d-surface-2: #1d2530;  --d-surface-3: #27313d;
  --d-line: #2b3540;       --d-line-2: #1b232b;
  --d-ink: #e5eaf0;        --d-ink-2: #a4b1bd;     --d-ink-3: #76838f;
  --d-on-accent: #06131a;
  --d-pos: #4bd6ac;        --d-warn: #e9a83e;      --d-neg: #ff7161;        --d-info: #83b6e4;

  /* A2 — one family drawn for both scripts, so Arabic and Latin share a
     baseline, a weight and a rhythm. Plex Sans carries no Arabic glyphs, so the
     browser falls through per glyph to Plex Sans Arabic: that ordering is the
     point, not an oversight. Before this the stack named no Arabic face at all,
     and Arabic rendered in whatever the operating system happened to supply —
     a different weight and x-height beside every Latin label. */
  --font-ui: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --shadow-1: 0 1px 2px rgba(16, 26, 34, .07);
  --shadow-2: 0 4px 16px -6px rgba(16, 26, 34, .18), 0 1px 3px rgba(16, 26, 34, .07);
  --shadow-3: 0 18px 44px -18px rgba(16, 26, 34, .32), 0 2px 8px rgba(16, 26, 34, .10);
  --dur: 150ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* A1 — one brand, committed.
   This was six presets with swatches in the header, which demonstrates a theming
   system rather than shipping a product: nobody running a dental group sets
   their software to plum, and offering the choice is why the application had no
   identity of its own. A clinic's branding is these two values overridden at
   deployment — a deep hue for light grounds, a bright one for dark — not a
   control a receptionist looks at all day. */
:root { --a-l: #0b5a63; --a-d: #4ac6d6; }

/* --- LAYER 2: semantic tokens. The only thing components are allowed to read.
       Mapped four times: default light, system dark, forced dark, forced light. */
:root, :root[data-theme="light"] {
  --bg: var(--l-bg);             --surface: var(--l-surface);
  --surface-2: var(--l-surface-2); --surface-3: var(--l-surface-3);
  --line: var(--l-line);         --line-2: var(--l-line-2);
  --ink: var(--l-ink);           --ink-2: var(--l-ink-2);  --ink-3: var(--l-ink-3);
  --accent: var(--a-l);          --on-accent: var(--l-on-accent);
  --pos: var(--l-pos);           --warn: var(--l-warn);
  --neg: var(--l-neg);           --info: var(--l-info);
  /* The frame is separated by its border, not by an elevation under it. */
  --chrome-shadow: none;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--d-bg);             --surface: var(--d-surface);
    --surface-2: var(--d-surface-2); --surface-3: var(--d-surface-3);
    --line: var(--d-line);         --line-2: var(--d-line-2);
    --ink: var(--d-ink);           --ink-2: var(--d-ink-2);  --ink-3: var(--d-ink-3);
    --accent: var(--a-d);          --on-accent: var(--d-on-accent);
    --pos: var(--d-pos);           --warn: var(--d-warn);
    --neg: var(--d-neg);           --info: var(--d-info);
    --chrome-shadow: none;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: var(--d-bg);             --surface: var(--d-surface);
  --surface-2: var(--d-surface-2); --surface-3: var(--d-surface-3);
  --line: var(--d-line);         --line-2: var(--d-line-2);
  --ink: var(--d-ink);           --ink-2: var(--d-ink-2);  --ink-3: var(--d-ink-3);
  --accent: var(--a-d);          --on-accent: var(--d-on-accent);
  --pos: var(--d-pos);           --warn: var(--d-warn);
  --neg: var(--d-neg);           --info: var(--d-info);
  --chrome-shadow: none;
  color-scheme: dark;
}

/* Derived once, never authored twice — re-resolves against whatever ground it
   lands on, so a tint is correct in both themes with no second definition. */
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 42%, transparent);
  --pos-soft:  color-mix(in srgb, var(--pos)  14%, var(--surface));
  --warn-soft: color-mix(in srgb, var(--warn) 14%, var(--surface));
  --neg-soft:  color-mix(in srgb, var(--neg)  14%, var(--surface));
  --info-soft: color-mix(in srgb, var(--info) 14%, var(--surface));
  /* For controls with no border of their own: buttons, links, chips, tabs. The
     gap is what keeps the ring off a filled background. */
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* The focus ring itself (QA assessment 004-06). An outline rather than a shadow:
     2px of the accent, 2px off the control, on every interactive thing in the kit.
     The reviewer measured the old field ring, a 1px inset shadow, and it was too
     faint to find on a busy form. An outline also survives Windows High Contrast,
     which drops box shadows entirely. The accent is re-pointed per theme above, so
     the ring follows dark mode without a rule of its own. The accent against the
     surface is 7.9:1, past the 3:1 a focus indicator needs. */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  /* What bordered controls used to draw as their focus. Kept as a name, because
     the kit's ported files read it, and emptied: the outline above is the ring now,
     and a field that drew both would carry two. */
  --focus-field: none;

  /* Native controls the browser paints itself: the date picker's calendar and its
     selected day, checkboxes, radios, range thumbs. Left alone they come out in
     Chrome's blue, which is the one colour on the screen that belongs to no
     theme -- and it is the first thing anybody notices, because it is the only
     part of the page that did not change when the brand did. */
  accent-color: var(--accent);
}

/* Density — clinics work on 24-inch screens with a hundred rows visible.
   Reception defaults to compact. A3: this is a role default set at sign-in, not
   a toggle in the chrome; a user who wants to change it does so once, in their
   profile. */
:root, :root[data-density="cozy"] {
  --ctl-h: 36px; --ctl-px: 12px; --ui: 13.5px; --ui-sm: 12px;
  --gap: 12px; --row-h: 40px; --pad: 16px;
  --t-display: 27px; --t-h1: 21px; --t-h2: 17px; --t-h3: 14.5px;
}
:root[data-density="compact"] {
  --ctl-h: 28px; --ctl-px: 9px; --ui: 12.5px; --ui-sm: 11px;
  --gap: 8px; --row-h: 30px; --pad: 11px;
  --t-display: 24px; --t-h1: 19px; --t-h2: 15.5px; --t-h3: 13.5px;
}

:root, :root[data-shape="soft"] { --r1: 6px; --r2: 9px; --r3: 14px; }
:root[data-shape="sharp"]       { --r1: 2px; --r2: 3px; --r3: 5px; }

/* --- LAYER 3: names some screens were written with, mapped to the semantic tokens.
   Each was used and never defined, so the rule that read it was silently dropped:
   the shell's branch label had no gap, the demo pages no spacing, several cards no
   border colour. Defining them here restores what those screens meant; new code
   reads the layer-2 names. TokenTests refuses a token that is used and never defined. */
:root {
  --border: var(--line);
  --card: var(--surface);
  --surface-sunken: var(--bg);
  --ink-1: var(--ink);
  --muted: var(--ink-3);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --radius-sm: var(--r1);
  --radius-md: var(--r2);
  --radius-lg: var(--r3);
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
}