/* Unified portal design tokens. Final, version A ("Clear"), chosen 2026-11-04.
 *
 * This file is the only place a raw colour, size, radius, shadow, duration or z-index may appear.
 * Everything else uses var(--token). `design/scripts/lint.mjs` fails on any other raw value.
 *
 * Neutrals are Apple's own (light: #f5f5f7 ground, #1d1d1f ink; dark: true black, #1c1c1e surfaces).
 * Type is the system Helvetica Neue (every iPhone, iPad and Mac); Windows and Android fall back to Arial,
 * which has the same letter widths. No font files are shipped.
 *
 * Each client picks ONE of five accents (blue, green, teal, orange, purple). The accent is set on <html>
 * as data-accent="…" by the server from the tenant's settings, and it carries both a light and a dark
 * value. Every accent passes 4.5:1 as text on its surfaces. Red is never an accent: red means "bad".
 */

:root {
  color-scheme: light;

  /* ---------- Colour: surfaces ---------- */
  --ground: #f5f5f7;          /* window ground, sidebar, iPhone page */
  --surface: #ffffff;         /* cards, drawers, grouped lists */
  --surface-2: #fbfbfd;       /* a quiet step inside a surface (drawer footer, readout well) */
  --fill: rgba(120, 120, 128, 0.12);    /* segmented track, search field, avatar disc, secondary button */
  --fill-hover: rgba(120, 120, 128, 0.08);
  --fill-active: rgba(120, 120, 128, 0.16);
  --scrim: rgba(0, 0, 0, 0.22);

  /* ---------- Colour: lines ---------- */
  --line: #e5e5ea;            /* card edges, row rules, dividers */
  --line-strong: #d1d1d6;     /* control borders and strong dividers */
  --field-line: #8e8e93;      /* text field outline: 3:1 on --surface (WCAG 1.4.11) */

  /* ---------- Colour: text (every tier reaches 4.5:1 on --surface and --ground) ---------- */
  --text: #1d1d1f;
  --text-2: #636366;          /* secondary, labels, axis, placeholders; 4.5:1 even on --fill over --ground */
  --text-disabled: #aeaeb2;   /* only with a written reason beside it */
  --on-accent: #ffffff;

  /* ---------- Colour: accent (default blue; see the data-accent blocks below) ---------- */
  --accent: #0062c4;          /* links, selected state, main chart series; 4.5:1 on --accent-soft over --ground */
  --accent-fill: #0071e3;     /* primary button fill */
  --accent-fill-hover: #0068d1;
  --accent-soft: rgba(0, 113, 227, 0.10);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); /* two rings: visible on any background */

  /* ---------- Swatches for the colour picker (the five accents' light values) ---------- */
  --swatch-blue: #0071e3; --swatch-green: #1a7f37; --swatch-teal: #0a7d86; --swatch-orange: #c25400; --swatch-purple: #6e3fc9;

  /* ---------- Colour: status (text colours pass 4.5:1; pills are pale pairs) ---------- */
  --positive: #1a7f37;
  --positive-bg: #e6f4ea;
  --positive-ink: #0f5c26;
  --negative: #d70015;
  --negative-bg: #fdecee;
  --negative-ink: #a1000f;
  --negative-fill: #d70015;   /* badges and destructive buttons: white label at 4.5:1 */
  --warning: #a05a00;
  --warning-bg: #fff4e0;
  --warning-ink: #7a4100;
  --switch-on: #34c759;       /* iOS switch green: the track only, never text */

  /* ---------- Colour: charts ---------- */
  --chart-1: var(--accent);   /* the series the screen is about */
  --chart-muted: #c7c7cc;     /* comparison period, other series */
  --chart-fill: var(--accent-soft); /* flat tint under the main series, never a gradient */
  --chart-grid: #ececf0;
  --chart-mark: #1d1d1f;      /* change markers */

  /* ---------- Material: iPhone bars only (nav bar, tab bar) ---------- */
  --bar-bg: rgba(250, 250, 252, 0.8);
  --bar-blur: saturate(180%) blur(20px);
  --bar-line: rgba(0, 0, 0, 0.12);

  /* ---------- Type ---------- */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-12: 12px;  --lh-12: 16px;   /* meta, axis ticks, table headers, captions */
  --fs-14: 14px;  --lh-14: 20px;   /* body, nav, table cells (desktop) */
  --fs-17: 17px;  --lh-17: 22px;   /* card titles; body on iPhone (also stops iOS input zoom) */
  --fs-22: 22px;  --lh-22: 28px;   /* drawer titles, iPhone KPI values */
  --fs-28: 28px;  --lh-28: 34px;   /* desktop page title, desktop KPI values */
  --fs-34: 34px;  --lh-34: 41px;   /* iPhone large title */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;                  /* Helvetica Neue has no 600: never use it */
  --tracking-tight: -0.02em;       /* 22px and up only */

  /* ---------- Space (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ---------- Radius (nested radii step down) ---------- */
  --r-xs: 4px;     /* chart bars' top corners, small marks */
  --r-sm: 6px;     /* pills, tags, count badges */
  --r-md: 10px;    /* buttons, fields, nav rows, segmented control */
  --r-lg: 14px;    /* cards, grouped lists */
  --r-xl: 20px;    /* drawer panel, iPhone sheet top corners */
  --r-full: 999px; /* switches, avatars, the sheet grabber */

  /* ---------- Sizes ---------- */
  --sidebar-w: 248px;
  --rail-w: 72px;
  --content-max: 1200px;
  --control-h: 32px;          /* desktop buttons, segmented, toolbar */
  --field-h: 36px;            /* desktop text fields */
  --row-h: 48px;              /* list row, one line */
  --row-h-2: 60px;            /* list row, two lines */
  --nav-row-h: 36px;
  --icon: 16px;
  --icon-nav: 18px;
  --drawer-w: 480px;
  --drawer-w-wide: 680px;
  --drawer-w-lg: 860px;          /* editors with a side column (classic 820-900px panels) */
  --drawer-w-xl: 1080px;         /* full editors (classic newsletter / campaign editors) */
  --tabbar-h: 50px;           /* plus the bottom safe area */
  --navbar-h: 44px;           /* plus the top safe area */

  /* ---------- Fixed parts (the few sizes that are not on the 4px scale) ---------- */
  --switch-w: 51px; --switch-h: 31px; --switch-knob: 27px; --switch-travel: 20px;   /* iOS switch geometry */
  --dot: 6px;                 /* legend dot, unread dot */
  --bar-h: 3px;               /* thin proportional bars in lists */
  --grabber-w: 36px; --grabber-h: 5px;  /* sheet grabber */
  --settings-max: 640px;      /* grouped-list pages */
  --stat-min: 140px;          /* smallest stat column */
  --search-max: 420px;        /* a search field in a card head */
  --logo-max-w: 160px; --login-max: 420px; --login-logo-max: 260px;
  --underline-offset: 3px;
  --font-mono: ui-monospace, Menlo, monospace;  /* code inside knowledge articles only */

  /* ---------- Safe areas (iPhone Home Screen app) ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------- Elevation: only things that float get a shadow ---------- */
  --shadow-float: 0 18px 48px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-control: 0 1px 2px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.04); /* selected segment, switch knob */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1); /* iOS sheet curve */
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 120ms;   /* hover, press, colour */
  --dur-2: 240ms;   /* segmented thumb, switch */
  --dur-3: 380ms;   /* drawer and sheet */

  /* ---------- Layers ---------- */
  --z-sticky: 10;
  --z-bars: 30;              /* above any content z-index (classic view rules go up to 20) */
  --z-drawer: 40;
  --z-toast: 50;
}

/* ---------- The five accents, light values ----------
   White label on --accent-fill and --accent-fill-hover is 4.5:1 or better in both themes.
   Every accent uses the base --focus-ring (surface gap, then solid accent). */
:root[data-accent="green"]  { --accent: #17752f; --accent-fill: #1a7f37; --accent-fill-hover: #17752f; --accent-soft: rgba(26, 127, 55, 0.10); }
:root[data-accent="teal"]   { --accent: #08707a; --accent-fill: #0a7d86; --accent-fill-hover: #08707a; --accent-soft: rgba(10, 125, 134, 0.10); }
:root[data-accent="orange"] { --accent: #a84800; --accent-fill: #c25400; --accent-fill-hover: #b34d00; --accent-soft: rgba(194, 84, 0, 0.10); }
:root[data-accent="purple"] { --accent: #6e3fc9; --accent-fill: #6e3fc9; --accent-fill-hover: #6438b8; --accent-soft: rgba(110, 63, 201, 0.10); }

/* ---------- Dark: true neutrals (iOS system greys), never navy or slate ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #000000;
  --surface: #1c1c1e;
  --surface-2: #232325;
  --fill: rgba(118, 118, 128, 0.24);
  --fill-hover: rgba(118, 118, 128, 0.18);
  --fill-active: rgba(118, 118, 128, 0.32);
  --scrim: rgba(0, 0, 0, 0.5);
  --line: #38383a;
  --line-strong: #48484a;
  --field-line: #6e6e73;
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-disabled: #636366;
  --accent: #409cff;
  --accent-fill: #0071e3;
  --accent-fill-hover: #0068d1;
  --accent-soft: rgba(41, 151, 255, 0.16);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --positive: #30d158;
  --positive-bg: rgba(48, 209, 88, 0.16);
  --positive-ink: #30d158;
  --negative: #ff6961;
  --negative-bg: rgba(255, 69, 58, 0.18);
  --negative-ink: #ff6961;
  --negative-fill: #e0243a;   /* #ff6961 under white is 2.8:1 */
  --warning: #ffb340;
  --warning-bg: rgba(255, 179, 64, 0.16);
  --warning-ink: #ffb340;
  --switch-on: #30d158;
  --chart-muted: #48484a;
  --chart-grid: #2c2c2e;
  --chart-mark: #f5f5f7;
  --bar-bg: rgba(22, 22, 24, 0.78);
  --bar-line: rgba(255, 255, 255, 0.12);
  --shadow-float: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-control: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}

/* ---------- The five accents, dark values (lighter, so they read on #1c1c1e) ---------- */
:root[data-theme="dark"][data-accent="green"]  { --accent: #30d158; --accent-fill: #1a7f37; --accent-fill-hover: #17752f; --accent-soft: rgba(48, 209, 88, 0.16); }
:root[data-theme="dark"][data-accent="teal"]   { --accent: #3cc0c9; --accent-fill: #0b7a83; --accent-fill-hover: #08707a; --accent-soft: rgba(60, 192, 201, 0.16); }
:root[data-theme="dark"][data-accent="orange"] { --accent: #ff9f0a; --accent-fill: #c25400; --accent-fill-hover: #b34d00; --accent-soft: rgba(255, 159, 10, 0.16); }
:root[data-theme="dark"][data-accent="purple"] { --accent: #c77dff; --accent-fill: #7b4bd6; --accent-fill-hover: #6e3fc9; --accent-soft: rgba(191, 90, 242, 0.16); }

/* iPhone and narrow windows: Apple's touch sizes. */
@media (max-width: 743px) {
  :root {
    --control-h: 44px;
    --field-h: 44px;
    --row-h: 52px;
    --row-h-2: 64px;
    --icon: 18px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --bar-bg: var(--ground); --bar-blur: none; }
}