/* ============================================================================
   ds/tokens.css — EVERY colour, size, type, depth and motion value of the
   QUALITY design system (Direction A, approved by Adnan 2026-10-08/09).

   The one file a colour literal may live in (docs/DESIGN_SYSTEM.md §3). Everything
   else writes var(--token). Values come from the approved boards
   (docs/design/approved.json lists them and the board hashes; the guard
   "design reference is in the tree" holds the two equal).

   BOTH INTERFACES read these tokens (2026-10-09): a page moved onto the design system
   changes for everybody, so its components must be drawn in Classic too. The roles sit
   at html:root — above app.css's and ds.css's :root, below nothing a page sets. Only the
   New shell (ds/shell.css, ds/base.css) is scoped to html.ui-new. When the classic
   interface retires, the html.ui-new blocks below fold into these.

   Brand colours from Settings → General → Branding still recolour everything:
   --accent / --green / --dark / --on-accent / --accent-text are written by
   context._theme_css AFTER this file at the same :root level, so they win; every
   role below that carries the brand is DERIVED from them (color-mix), never typed,
   so another company's primary colour reaches the chips, selection and focus too.
   ============================================================================ */
/* The brand defaults — the same values app.css has always declared, so the classic
   interface sees no change. Only these may sit at :root during the pilot. */
:root{
  --brand-dark: var(--dark);   /* fixed at the root (Dark redefines --dark) */
  --accent: #02c4c4;                 /* Maximum Blue */
  --green: #71cc98;                  /* Pantone 346 C */
  --dark: #2d2d2d;                   /* Night Rider */
  --on-accent: #06121a;              /* ink on the brand fill (theme.ink_on) */
  --accent-text: #017878;            /* the brand colour as TEXT (theme.readable_on) */
}
html:root{
  --ds-version: "1.0.0";

  --gradient-brand: linear-gradient(90deg, var(--green) 0%, var(--accent) 100%);

  /* ---- surfaces ---- */
  --surface-app: #f4f4f5;            /* behind the sheet */
  --surface-1: #ffffff;              /* sheet, list, card */
  --surface-2: #f7f7f8;              /* an inset, a table head band */
  --surface-3: #ffffff;              /* menus, pop-overs, dialogs */
  --surface-hover: #f1f1f3;
  --surface-selected: color-mix(in srgb, var(--accent) 10%, #ffffff);   /* a selected row */
  --surface-facet: #ececef;          /* a search facet, the active view button */

  /* ---- ink (rule 11: grey means BLOCKED, everything else is dark) ---- */
  --text: #2d2d2d;
  --text-2: #3a3a3f;
  --text-muted: #55555b;             /* a label: one step lighter than its value, never blocked grey */
  --text-disabled: #8f8f96;          /* BLOCKED only */

  /* ---- lines ---- */
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --border-control: #8a8a90;         /* a field / button edge: ≥ 3:1 on white */
  --border-selected: var(--accent-text);  /* a selected control never relies on the fill alone */

  /* ---- fields ---- */
  --input-bg: #ffffff;
  --input-border: var(--border-control);
  --input-text: #2d2d2d;
  --input-placeholder: #6b6b72;

  /* ---- the charcoal bar (the brand's dark; follows Settings → color_dark) ---- */
  --bar-bg: var(--brand-dark);
  --bar-ink: #f4f4f5;
  --bar-muted: #c9c9ce;
  --bar-hover: rgba(255, 255, 255, .08);
  --bar-active-line: var(--accent);

  /* ---- status chips and notices: a word on a tint, never colour alone ---- */
  --tint-neutral-bg: #ececef;  --tint-neutral-fg: #3a3a3f;  --tint-neutral-line: #d4d4d8;
  --tint-accent-bg: color-mix(in srgb, var(--accent) 14%, #ffffff);
  --tint-accent-fg: color-mix(in srgb, var(--accent-text) 78%, #000000);
  --tint-accent-line: color-mix(in srgb, var(--accent) 45%, #ffffff);
  --tint-success-bg: #e3f4ea;  --tint-success-fg: #1f6a43;  --tint-success-line: #a9d9bd;
  --tint-danger-bg: #fbe9e9;   --tint-danger-fg: #9a2323;   --tint-danger-line: #efb3b3;
  --tint-warning-bg: #fdf1d8;  --tint-warning-fg: #7a4f00;  --tint-warning-line: #ecd08f;
  --tint-info-bg: #e5eefc;     --tint-info-fg: #1d4f9e;     --tint-info-line: #b3c9f0;
  --tint-violet-bg: #efe9fb;   --tint-violet-fg: #5b3fa0;   --tint-violet-line: #cfc0ef;
  --tint-muted-bg: #f1f1f3;    --tint-muted-fg: #55555b;    --tint-muted-line: #d4d4d8;

  /* ---- charts (validated for colour-blind readers, plan "Design facts") ---- */
  --chart-1: #0e9f9f; --chart-2: #2f6fd6; --chart-3: #c47f12; --chart-4: #2f9e5f;
  --chart-grid: #e4e4e7; --chart-axis: #55555b; --chart-text: #2d2d2d;

  /* ---- type: Cabin for titles and text (Eddie, 2026-09-26) ---- */
  --font-head: 'Cabin', system-ui, sans-serif;
  --font-body: 'Cabin', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 16px;
  --fs-title: 19px; --fs-heading: 22px; --fs-record: 26px; --fs-display: 54px;
  --fw-regular: 400; --fw-medium: 600; --fw-bold: 700;
  --lh-base: 1.45; --lh-tight: 1.15;

  /* ---- geometry (measured: geometry/reference-geometry.json, boxes only) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --gutter: 20px;
  --bar-h: 46px; --bar-line-h: 2px;
  --ctl-h: 32px; --ctl-h-sm: 26px; --ctl-pad-x: 14px; --ctl-radius: 6px;
  --field-h: 32px; --field-pad-x: 10px; --search-h: 34px;
  --th-h: 38px; --row-h: 38px; --field-label-w: 140px;
  --tab-h: 38px; --tab-pad-x: 14px;
  --chip-radius: 11px; --chip-pad: 2px 10px; --pill-radius: 999px; --radius-facet: 4px;
  --badge-h: 17px; --facet-h: 24px; --avatar-bar: 30px; --bar-title-max: 260px;
  --stroke-icon: 1.8;
  --radius-card: 12px; --radius-menu: 8px; --radius-modal: 12px; --edge-overlap: -1px;
  --surface-keep: #ffffff; --text-keep: #2d2d2d; --attention-fill: #f59e0b;   /* the paper; never redefined in Dark */
  /* the record page — the reference's current layout files (Adnan, 12 October): the record fills
     the row up to 1400 px, the chatter is 530 px at least and takes the rest; 910+530 @1440,
     1390+530 @1920, 1400+1160 @2560; the row stops at 2600 px */
  --record-form-basis: 900px; --record-form-max: 1400px; --record-chatter-min: 530px;
  --record-row-max: 2600px; --record-gap: 8px; --record-side-at: 1400px;
  --sheet-pad: 16px; --statusbar-h: 33px;
  --chatter-avatar: 32px; --chatter-avatar-sm: 24px; --chatter-pad-l: 8px; --chatter-pad-end: 48px;
  --chatter-compose-h: 72px; --chatter-thumb-h: 240px;
  --icon-app: 24px; --icon-ui: 18px; --icon-home: 70px; --icon-home-pad: 9px; --icon-home-phone: 52px; --icon-home-phone-pad: 7px;
  --home-tile: #ffffff; --shadow-tile: 0 1px 2px rgba(20, 20, 24, .12), 0 2px 6px rgba(20, 20, 24, .06);
  --fs-error-code: 52px;
  /* Home (Adnan, 12-13 Oct; the reference measured — DESIGN_SYSTEM.md §4 Home) */
  --home-bar-h: 56px; --home-logo-h: 26px; --home-col: 137px; --home-row: 132px; --home-grid-max: 822px;
  --home-top: 44px; --home-label-gap: 10px;
  --home-ground: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, #fff) 0%, var(--surface-app) 48%,
    color-mix(in srgb, var(--green) 6%, #fff) 100%);
  --signin-card-w: 400px; --signin-logo-h: 55px; --signin-field-h: 40px;
  --signin-ground: var(--brand-dark); --signin-card: #f3f3f4;
  --menu-min: 200px; --menu-max: 360px; --menu-item-h: 32px;
  --modal-sm: 420px; --modal-md: 640px; --modal-lg: 960px;
  --z-bar: 50; --z-menu: 60; --z-modal: 1000;

  /* ---- depth: flat, one elevation for what floats ---- */
  --shadow-none: none;
  --shadow-elev: 0 8px 24px rgba(20, 20, 24, .16);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
  --overlay: rgba(20, 20, 24, .45);

  /* ---- motion: short, and none for a reader who asked for none ---- */
  --motion-fast: 120ms; --motion-base: 180ms;

}

/* The New interface only: the ink on a brand fill always reads, and the older names app.css's
   components still read point at the roles. (The classic interface keeps its own.) */
html.ui-new{
  --on-accent-fill: var(--on-accent);
  --bg: var(--surface-app); --panel: var(--surface-1); --ink: var(--text);
  --muted: var(--text-muted); --line: var(--border);
}

/* Dark: the same roles, the boards' dark values. body.dark is set before first paint
   (_theme_head.html); html.ui-new body.dark outranks the classic map in theme-roles.css. */
body.dark{
  --home-tile: #2a2a2c; --shadow-tile: 0 1px 2px rgba(0, 0, 0, .4);
  --home-ground: linear-gradient(160deg, #1b1b1c 0%, #222224 55%, #2a2a2c 100%);
  --surface-app: #222224;
  --surface-1: #2a2a2c;
  --surface-2: #2d2d2f;
  --surface-3: #333336;
  --surface-hover: #333336;
  --surface-selected: color-mix(in srgb, var(--accent) 22%, #2a2a2c);
  --surface-facet: #3a3a3e;
  --text: #f4f4f5;
  --text-2: #e4e4e7;
  --text-muted: #b9b9be;
  --text-disabled: #7d7d84;
  --border: #3a3a3d;
  --border-strong: #55555a;
  --border-control: #808086;         /* ≥ 3:1 on #2a2a2c */
  --border-selected: var(--accent-text);
  --input-bg: #222224;
  --input-border: var(--border-control);
  --input-text: #f4f4f5;
  --input-placeholder: #a1a1a8;
  --bar-bg: #1b1b1c;
  --signin-ground: #171717; --signin-card: #252527;
  --bar-ink: #f4f4f5;
  --bar-muted: #c9c9ce;
  --tint-neutral-bg: #3a3a3e;  --tint-neutral-fg: #e4e4e7;  --tint-neutral-line: #55555a;
  --tint-accent-bg: color-mix(in srgb, var(--accent) 24%, #2a2a2c);
  --tint-accent-fg: color-mix(in srgb, var(--accent-text) 70%, #ffffff);
  --tint-accent-line: color-mix(in srgb, var(--accent) 45%, #2a2a2c);
  --tint-success-bg: #173d2a;  --tint-success-fg: #8fdcb2;  --tint-success-line: #2b6b4a;
  --tint-danger-bg: #4a1f1f;   --tint-danger-fg: #f3a6a6;   --tint-danger-line: #7a3434;
  --tint-warning-bg: #45351a;  --tint-warning-fg: #f3cf8a;  --tint-warning-line: #7a5f2c;
  --tint-info-bg: #1c2d4d;     --tint-info-fg: #a9c4f5;     --tint-info-line: #34507f;
  --tint-violet-bg: #33284d;   --tint-violet-fg: #cbb8f5;   --tint-violet-line: #55447f;
  --tint-muted-bg: #333336;    --tint-muted-fg: #c9c9ce;    --tint-muted-line: #55555a;
  --chart-1: #18a0a0; --chart-2: #6382ea; --chart-3: #bf8019; --chart-4: #3aa86a;
  --chart-grid: #3a3a3d; --chart-axis: #b9b9be; --chart-text: #f4f4f5;
  --shadow-elev: 0 10px 28px rgba(0, 0, 0, .5);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);
  --overlay: rgba(0, 0, 0, .6);
}
html.ui-new body.dark{
  --on-accent-fill: var(--on-accent);
  --bg: var(--surface-app); --panel: var(--surface-1); --ink: var(--text);
  --muted: var(--text-muted); --line: var(--border);
  background: var(--surface-app);
  color: var(--text);
}

@media (min-width: 992px) and (max-width: 1399px){
  html:root{ --sheet-pad: 24px; }
}
@media (min-width: 1921px){
  html:root{ --record-gap: 16px; --chatter-pad-l: 16px; }
}
@media (max-width: 767px){
  html:root{ --gutter: 12px; --sheet-pad: 16px; --ctl-h: 36px; --field-h: 38px; }
}
@media (prefers-reduced-motion: reduce){
  html:root{ --motion-fast: 0ms; --motion-base: 0ms; }
}