/*
  Ember — base tokens, v4. Shared by every look (Ember, Seedling, Quartz).

  Load order: look fonts -> base-tokens.css -> <look>/css/tokens.css ->
  ember/palettes/<p>.css (optional) -> reset.css -> components.css -> look chrome.

  This file holds what does not change between looks: space, control sizes,
  layout, layers, the font-size scale, line heights, the six statuses per mode,
  the default chart colours per mode, and the neutral colour formulas.

  Neutrals are computed here, once, from three inputs a look (or a palette)
  sets:
    --tint-hue      OKLCH hue, unitless degrees: the colour the greys lean to
    --tint-chroma   OKLCH chroma at multiplier 1
    --n-<role>      OKLCH lightness 0..1 per role, per mode (look tokens.css)
    --k-<role>      optional chroma multiplier per role (default 1)
  so a palette re-tints every surface, border and text by changing two numbers.

  Status colours are never set by palettes: a state reads the same in every
  look and palette. Contrast figures are WCAG 2.x ratios.
*/

:root {
  /* ---- neutrals (values come from the look's --n-* / --k-* / --tint-*) ---- */
  --color-bg-canvas: oklch(var(--n-bg-canvas) calc(var(--tint-chroma) * var(--k-bg-canvas, 1)) var(--tint-hue));
  --color-bg-surface: oklch(var(--n-bg-surface) calc(var(--tint-chroma) * var(--k-bg-surface, 1)) var(--tint-hue));
  --color-bg-raised: oklch(var(--n-bg-raised) calc(var(--tint-chroma) * var(--k-bg-raised, 1)) var(--tint-hue));
  --color-bg-sunken: oklch(var(--n-bg-sunken) calc(var(--tint-chroma) * var(--k-bg-sunken, 1)) var(--tint-hue));
  --color-bg-overlay: oklch(var(--n-bg-overlay) calc(var(--tint-chroma) * var(--k-bg-overlay, 1)) var(--tint-hue) / 0.75);
  --color-border-subtle: oklch(var(--n-border-subtle) calc(var(--tint-chroma) * var(--k-border-subtle, 1)) var(--tint-hue));
  --color-border-default: oklch(var(--n-border-default) calc(var(--tint-chroma) * var(--k-border-default, 1)) var(--tint-hue));
  --color-border-strong: oklch(var(--n-border-strong) calc(var(--tint-chroma) * var(--k-border-strong, 1)) var(--tint-hue));
  --color-border-control: oklch(var(--n-border-control) calc(var(--tint-chroma) * var(--k-border-control, 1)) var(--tint-hue));
  --color-text-primary: oklch(var(--n-text-primary) calc(var(--tint-chroma) * var(--k-text-primary, 1)) var(--tint-hue));
  --color-text-secondary: oklch(var(--n-text-secondary) calc(var(--tint-chroma) * var(--k-text-secondary, 1)) var(--tint-hue));
  --color-text-tertiary: oklch(var(--n-text-tertiary) calc(var(--tint-chroma) * var(--k-text-tertiary, 1)) var(--tint-hue));
  --color-text-disabled: oklch(var(--n-text-disabled) calc(var(--tint-chroma) * var(--k-text-disabled, 1)) var(--tint-hue));
  --color-text-inverse: oklch(var(--n-text-inverse) calc(var(--tint-chroma) * var(--k-text-inverse, 1)) var(--tint-hue));

  /* ---- accent aliases (the look or palette sets --color-ember*) ----
     Three roles. Text: --color-accent (links, CTAs, focus; ink in light
     mode). Fill: --color-accent-fill + --color-on-accent (labelled solid
     surfaces; the brand colour, may be bright); -mark for unlabelled marks.
     Wash: --color-accent-muted (active nav, pressed chips). The fill
     defaults to the accent, so a palette without fill values is unchanged. */
  --color-accent: var(--color-ember);
  --color-accent-muted: var(--color-ember-muted);
  --color-accent-fill: var(--color-ember);              /* NEW v4: labelled solid surfaces */
  --color-accent-fill-hover: var(--color-ember-bright); /* NEW v4: hover step of the fill */
  --color-accent-mark: var(--color-accent-fill);        /* NEW v4: unlabelled marks, >= 3:1 on surface + raised */
  --color-on-accent: var(--color-text-inverse);  /* NEW v4: text/icons on --color-accent-fill; looks and palettes set their own */

  /* Hazard stripe — the quarantine texture. Amber over magenta: the
     radiation-sign pairing, readable without colour as diagonal stripes. */
  --pattern-quarantine: repeating-linear-gradient(
    -45deg, var(--color-quarantine) 0 3px, var(--color-warn) 3px 6px);

  /* v2 broadcast names — kept as aliases so existing markup keeps working.
     live = DANGER (not "currently active"); preview = info; standby = warn;
     ready = ok; hygiene = quarantine. Prefer the plain names in new code. */
  --color-live: var(--color-danger);
  --color-live-muted: var(--color-danger-muted);
  --color-preview: var(--color-info);
  --color-preview-muted: var(--color-info-muted);
  --color-standby: var(--color-warn);
  --color-standby-muted: var(--color-warn-muted);
  --color-ready: var(--color-ok);
  --color-ready-muted: var(--color-ok-muted);
  --color-hygiene: var(--color-quarantine);
  --color-hygiene-muted: var(--color-quarantine-muted);

  /* ---- font-size scale (display sizes live in the look: they follow its face) ---- */
  --font-size-2xs: 0.6875rem;  /* 11px — micro labels */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.8125rem;   /* 13px */
  --font-size-base: 0.875rem;  /* 14px — dense UI default */
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-loose: 1.7;

  /* ---- space (4px base unit) ---- */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ---- control sizes ---- */
  --control-h-sm: 28px;
  --control-h: 36px;
  --control-h-touch: 44px;     /* coarse pointers: every control grows to this */

  /* ---- layout ---- */
  --sidebar-w: 56px;
  --sidebar-w-open: 220px;
  --header-h: 52px;
  --tabbar-h: 56px;
  --page-max: 1600px;

  /* ---- z-index ---- */
  --z-base: 0;
  --z-header: 200;
  --z-sidebar: 250; /* above header, so a floating (unpinned) sidebar overlaps it */
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* ---- status — six states, one meaning each, per mode ----
   Canonical names are the plain words. Each has a -muted tint for
   backgrounds; text in the full colour on its own -muted tint is >= 4.5:1.
   Status colours never mean "interactive" — that is the accent's job. */
:root, [data-theme="dark"] {
  --color-ok: #4FCB7A;              /* verified, healthy, done          6.8:1 on muted */
  --color-ok-muted: #12321F;
  --color-info: #6FA8DC;            /* running, in progress, notice      6.0:1 on muted */
  --color-info-muted: #16273A;
  --color-warn: #F0B429;            /* degraded, queued, attention       7.3:1 on muted */
  --color-warn-muted: #3A2C0D;
  --color-danger: #FF6B78;          /* failed, critical, destructive     5.9:1 on muted; pink-red keeps its luminance under protanopia */
  --color-danger-muted: #3A1418;
  --color-quarantine: #D96BC4;      /* held/suspect: not failed, not safe 5.3:1 on muted */
  --color-quarantine-muted: #35142F;
  --color-idle: #8B91A7;            /* neutral, stopped, unknown         5.1:1 on muted */
  --color-idle-muted: #1B2130;

  /* Default categorical chart slots, in fixed order: palette "clear"'s
     dark set (ember/palettes/clear.css). >= 3:1 on every look's surface,
     every pair >= dE 5 under normal / deuteranopia / protanopia vision
     (ember/scripts/palette_check.py). Looks whose default palette is not
     clear set their own. Never reuse a status colour as a series. */
  --color-chart-1: #62C8DF;  /* oklch(0.78 0.100 215) */
  --color-chart-2: #C95B0A;  /* oklch(0.60 0.160 48) */
  --color-chart-3: #7E6CD9;  /* oklch(0.60 0.161 288) */
  --color-chart-4: #F6C330;  /* oklch(0.84 0.160 88) */
  --color-chart-5: #B56088;  /* oklch(0.60 0.119 352) */
  --color-chart-6: #E88B0E;  /* oklch(0.72 0.160 64) */
  --color-chart-7: #33EBB6;  /* oklch(0.84 0.160 168) */
  --color-chart-8: #9398FF;  /* oklch(0.72 0.149 280) */
}

/* Light statuses. Text >= 4.5:1 on its own -muted AND on a light surface
   (figures on oklch(0.985 0.003 268) = #F9FAFC; whiter surfaces only gain).
   Under deuteranopia/protanopia every pair stays >= 6 OKLab dE x100 (worst:
   info/quarantine 6.0 deutan, ok/danger 6.4 deutan, ok/warn 7.0 protan) —
   wider than the dark set's worst pair (3.8). Danger sits darkest and warn
   lightest so the red/amber/green trio also separates by lightness. */
[data-theme="light"] {
  --color-ok: #007D54;              /* oklch(0.52 0.115 162)  4.7:1 on muted, 5.0 on surface */
  --color-ok-muted: #DBFBEA;
  --color-info: #1F6CB0;            /* oklch(0.52 0.13 250)   4.8:1 on muted, 5.3 on surface */
  --color-info-muted: #E2F2FF;
  --color-warn: #9C640D;            /* oklch(0.55 0.115 70)   4.6:1 on muted, 4.7 on surface */
  --color-warn-muted: #FFF6D5;
  --color-danger: #A91228;          /* oklch(0.47 0.18 22)    6.4:1 on muted, 7.2 on surface */
  --color-danger-muted: #FFE9E8;
  --color-quarantine: #9C3B96;      /* oklch(0.52 0.17 330)   5.2:1 on muted, 5.8 on surface */
  --color-quarantine-muted: #FCE9FA;
  --color-idle: #505561;            /* oklch(0.45 0.02 268)   6.4:1 on muted, 7.2 on surface */
  --color-idle-muted: #EAEDF2;

  /* Default chart slots, light: palette "clear"'s light set (same rules
     as dark, checked on every light look's surface). */
  --color-chart-1: #004154;  /* oklch(0.35 0.066 225) */
  --color-chart-2: #569B2B;  /* oklch(0.62 0.160 136) */
  --color-chart-3: #7577E3;  /* oklch(0.62 0.160 280) */
  --color-chart-4: #0A6D37;  /* oklch(0.47 0.120 152) */
  --color-chart-5: #5A45AD;  /* oklch(0.47 0.159 288) */
  --color-chart-6: #00888E;  /* oklch(0.57 0.097 200) */
  --color-chart-7: #006679;  /* oklch(0.47 0.084 216) */
  --color-chart-8: #199D78;  /* oklch(0.62 0.121 168) */
}