/* =============================================================================
   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);

  /* For controls that already have a border: inputs, selects, textareas.

     An inset ring, not an outward halo. A soft glow around a bordered box is the
     same "border plus shadow" the rest of the system dropped, and it is the one
     place it survived. Drawn inside the control the focus is still unmistakable —
     the border reads as a solid 2px accent edge — but nothing bleeds outside the
     box and nothing shifts.

     Not removed: a keyboard user has to be able to see which field they are in,
     and the accent against the surface is 7.9:1, comfortably past the 3:1 that a
     focus indicator needs. */
  --focus-field: inset 0 0 0 1px var(--accent);

  /* 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; }