/* ============================================================
   HMI DESIGN SYSTEM — TOKENS v1.0
   Grayscale-first interface tokens. Light + dark.

   Usage:
     <link rel="stylesheet" href="hmi-tokens.css">
     <html data-theme="light">   or   data-theme="dark"
     Omit data-theme to follow the OS setting.

   Rule: application CSS references these variables only.
   No literal color values anywhere else.
   ============================================================ */

:root {

  /* ---------- NEUTRAL RAMP (theme-independent) ----------
     Rebased on the CREMER corporate neutrals (CI Manual 2026-02). The brand's own
     anchors sit at the steps where they belong, so the interface reads as CREMER
     while staying grayscale-first — the palette IS the brand, not a tint over it:

       --gray-100  Bright Gray  #EDEDED
       --gray-500  Pale Stone   #768D99   (PMS 7544)
       --gray-900  Stone Gray   #2C3C4C   (PMS 7546) — the brand's typography color

     Intermediate steps are interpolated in Oklab so lightness moves evenly.
     --gray-800 is anchored rather than interpolated: it is the dark RAISED surface,
     and anything lighter drops --signal-critical below 4.5:1 against it. The dark
     elevation step is deliberately subtle for that reason.

     Every pair in the token reference was re-measured after this change and passes.
     Do not substitute a value here without re-running that check. */
  --gray-000:  #FFFFFF;
  --gray-025:  #FAFAFA;
  --gray-050:  #F6F6F6;
  --gray-100:  #EDEDED;
  --gray-200:  #CED4D7;
  --gray-300:  #B0BCC2;
  --gray-400:  #93A4AD;
  --gray-500:  #768D99;
  --gray-600:  #576C79;
  --gray-700:  #445664;
  --gray-800:  #31414F;
  --gray-900:  #2C3C4C;
  --gray-950:  #1C2733;
  --gray-1000: #10171E;

  /* ---------- TYPOGRAPHY ---------- */
  --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Set :root font-size to rescale the whole UI for viewing distance.
     16px desktop · 20px kiosk · 28-36px wall dashboard */
  --size-display:  2rem;      /* 32px */
  --size-h1:       1.5rem;    /* 24px */
  --size-h2:       1.25rem;   /* 20px */
  --size-h3:       1.125rem;  /* 18px */
  --size-body-lg:  1rem;      /* 16px */
  --size-body:     0.875rem;  /* 14px — default */
  --size-label:    0.8125rem; /* 13px */
  --size-caption:  0.75rem;   /* 12px */
  --size-micro:    0.6875rem; /* 11px */

  --size-value-xl: 3rem;      /* 48px */
  --size-value-lg: 2rem;      /* 32px */
  --size-value-md: 1.25rem;   /* 20px */
  --size-value-sm: 1rem;      /* 16px */

  --leading-tight:   1.2;
  --leading-heading: 1.25;
  --leading-body:    1.5;
  --leading-prose:   1.55;
  --leading-value:   1.05;

  --tracking-micro: 0.06em;
  --tracking-label: 0.01em;

  /* ---------- SPACE (4px base) ---------- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 96px;

  /* ---------- SHAPE ---------- */
  --radius-control: 4px;
  --radius-card:    6px;
  --radius-modal:   8px;
  --radius-pill:    999px; /* status dots and avatars only */
  --border-width:   1px;

  /* ---------- DENSITY (override per screen, never mixed) ---------- */
  --row-height:   40px;   /* 32 compact · 40 comfortable · 56 spacious */
  --card-padding: 24px;   /* 16 compact · 24 comfortable · 32 spacious */
  --control-height: 40px;
  --touch-min:    44px;   /* 48px where gloves are used */

  /* ---------- MOTION ---------- */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;

  /* ---------- LAYOUT ---------- */
  --content-max: 1440px;
  --measure:     65ch;
  --gutter:      24px;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
:root,
[data-theme="light"] {
  --surface-canvas:  var(--gray-025);
  --surface-default: var(--gray-000);
  --surface-raised:  var(--gray-000);
  --surface-sunken:  var(--gray-100);
  --surface-overlay: rgb(30 34 39 / 0.40);

  --border-subtle:      var(--gray-200);
  --border-default:     var(--gray-300);
  --border-interactive: var(--gray-500);

  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-500);  /* 18px+ or 14px/600 only */
  --text-inverse:   var(--gray-000);
  --text-disabled:  var(--gray-400);

  --signal-critical: #C42B2B;
  --signal-warning:  #A66300;
  --signal-positive: #1F7A3D;
  /* CREMER Petrol Blue (PMS 307). The one brand accent that enters the interface:
     focus rings, selection, unsaved state. 4.79:1 on the light canvas. */
  --signal-info:     #0076AE;

  /* 8% washes — use only when a left rule is insufficient */
  --wash-critical: rgb(196 43 43 / 0.08);
  --wash-warning:  rgb(166 99 0 / 0.08);
  --wash-positive: rgb(31 122 61 / 0.08);
  --wash-info:     rgb(31 95 199 / 0.08);

  --on-critical: var(--gray-000);
  --on-primary:  var(--gray-000);
  --fill-primary: var(--gray-900);
  --fill-disabled: var(--gray-300);

  /* Chart series — gray by lightness. Never by hue. */
  --chart-series-1: var(--gray-900);
  --chart-series-2: var(--gray-700);
  --chart-series-3: var(--gray-600);
  --chart-series-4: var(--gray-500);

  /* Muted identity palette — for CATEGORISATION ONLY, never for state.
     Saturation 0.16–0.49 so these can never out-shout a signal color. */
  --muted-slate: #4A5F7A;
  --muted-teal:  #3F6B68;
  --muted-sage:  #5A6B4A;
  --muted-clay:  #7A5648;
  --muted-plum:  #654A5F;
  --muted-ochre: #75663C;

  --shadow-card:  0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-modal: 0 8px 24px rgb(0 0 0 / 0.12);

  --tier-good-bg:   #E0ECE4;  --tier-good-fg:   #1A6834;  --tier-good-line: #1F7A3D;
  --tier-fair-bg:   #F3E9DB;  --tier-fair-fg:   #8A5200;  --tier-fair-line: #A66300;
  --tier-poor-bg:   #F7E1E1;  --tier-poor-fg:   #C42B2B;  --tier-poor-line: #C42B2B;
  --tier-none-bg:   var(--gray-100);
  --tier-none-fg:   var(--gray-600);

  color-scheme: light;
}

/* ============================================================
   DARK THEME
   Elevation is expressed as lighter surface, not shadow.
   ============================================================ */
[data-theme="dark"] {
  --surface-canvas:  var(--gray-950);
  --surface-default: var(--gray-900);
  --surface-raised:  var(--gray-800);
  --surface-sunken:  var(--gray-1000);
  --surface-overlay: rgb(11 13 16 / 0.60);

  --border-subtle:      var(--gray-600);
  --border-default:     var(--gray-500);
  --border-interactive: var(--gray-400);

  --text-primary:   var(--gray-000);
  --text-secondary: var(--gray-300);
  --text-tertiary:  var(--gray-400);
  --text-inverse:   var(--gray-900);
  --text-disabled:  var(--gray-500);

  --signal-critical: #FF8A8A;
  --signal-warning:  #FFC261;
  --signal-positive: #74E39F;
  --signal-info:     #8CCFF0;  /* Petrol Blue lifted for dark surfaces */

  --wash-critical: rgb(255 138 138 / 0.08);
  --wash-warning:  rgb(255 194 97 / 0.08);
  --wash-positive: rgb(116 227 159 / 0.08);
  --wash-info:     rgb(147 192 255 / 0.08);

  --on-critical: var(--gray-950);
  --on-primary:  var(--gray-900);
  --fill-primary: var(--gray-000);
  --fill-disabled: var(--gray-800);

  /* Chart series — inverted so they stay visible on a dark surface. */
  --chart-series-1: var(--gray-000);
  --chart-series-2: var(--gray-200);
  --chart-series-3: var(--gray-400);
  --chart-series-4: var(--gray-500);

  /* Muted identity palette — inverted for dark surfaces. */
  --muted-slate: #8FA3BC;
  --muted-teal:  #7FB0AC;
  --muted-sage:  #9DAF8C;
  --muted-clay:  #C09585;
  --muted-plum:  #B99AB1;
  --muted-ochre: #BCA870;

  --shadow-card:  none;
  --shadow-modal: 0 8px 24px rgb(0 0 0 / 0.40);

  --tier-good-bg:   #2A3D38;  --tier-good-fg:   #74E39F;  --tier-good-line: #74E39F;
  --tier-fair-bg:   #3E382F;  --tier-fair-fg:   #FFC261;  --tier-fair-line: #FFC261;
  --tier-poor-bg:   #3E3135;  --tier-poor-fg:   #FF8A8A;  --tier-poor-line: #FF8A8A;
  --tier-none-bg:   var(--gray-950);
  --tier-none-fg:   var(--gray-500);

  color-scheme: dark;
}

/* Follow the OS when no data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-canvas:  var(--gray-950);
    --surface-default: var(--gray-900);
    --surface-raised:  var(--gray-800);
    --surface-sunken:  var(--gray-1000);
    --surface-overlay: rgb(11 13 16 / 0.60);

    --border-subtle:      var(--gray-600);
    --border-default:     var(--gray-500);
    --border-interactive: var(--gray-400);

    --text-primary:   var(--gray-000);
    --text-secondary: var(--gray-300);
    --text-tertiary:  var(--gray-400);
    --text-inverse:   var(--gray-900);
    --text-disabled:  var(--gray-500);

    --signal-critical: #FF8A8A;
    --signal-warning:  #FFC261;
    --signal-positive: #74E39F;
    --signal-info:     #8CCFF0;  /* Petrol Blue lifted for dark surfaces */

    --wash-critical: rgb(255 138 138 / 0.08);
    --wash-warning:  rgb(255 194 97 / 0.08);
    --wash-positive: rgb(116 227 159 / 0.08);
    --wash-info:     rgb(147 192 255 / 0.08);

    --on-critical: var(--gray-950);
    --on-primary:  var(--gray-900);
    --fill-primary: var(--gray-000);
    --fill-disabled: var(--gray-800);

    /* Chart series — inverted so they stay visible on a dark surface. */
    --chart-series-1: var(--gray-000);
    --chart-series-2: var(--gray-200);
    --chart-series-3: var(--gray-400);
  --chart-series-4: var(--gray-500);

    /* Muted identity palette — inverted for dark surfaces. */
    --muted-slate: #8FA3BC;
    --muted-teal:  #7FB0AC;
    --muted-sage:  #9DAF8C;
    --muted-clay:  #C09585;
    --muted-plum:  #B99AB1;
    --muted-ochre: #BCA870;

    --shadow-card:  none;
    --shadow-modal: 0 8px 24px rgb(0 0 0 / 0.40);

    --tier-good-bg:   #2A3D38;  --tier-good-fg:   #74E39F;  --tier-good-line: #74E39F;
    --tier-fair-bg:   #3E382F;  --tier-fair-fg:   #FFC261;  --tier-fair-line: #FFC261;
    --tier-poor-bg:   #3E3135;  --tier-poor-fg:   #FF8A8A;  --tier-poor-line: #FF8A8A;
    --tier-none-bg:   var(--gray-950);
    --tier-none-fg:   var(--gray-500);

    color-scheme: dark;
  }
}


/* ============================================================
   TIER SCALE — categorical threshold encoding
   ------------------------------------------------------------
   NOT part of the signal palette. Signals mean "act now"; tiers
   mean "here is where this value sits on a scale."

   Use ONLY where every item on screen is a peer being compared
   against the same thresholds — scoreboards, hour-by-hour grids,
   scorecards, historical reports. A tinted cell says "this one
   is in the low band", not "go fix this".

   NEVER use tiers on a control screen, an alarm list, an
   equipment status list, or anything an operator acts on. On
   those screens normal is gray and colour means a person is
   needed. Tinting every row there destroys that.

   Two strengths, selected with data-viewing on any ancestor:
     near (default) — desk and handheld. Faint tint, tier-coloured text.
     far            — wall panel at 5 m or more. Strong fill, maximum
                      contrast text. Faint tints are invisible at distance.
   ============================================================ */

[data-viewing="far"],
[data-theme="light"] [data-viewing="far"] {
    --tier-good-bg: #AECFB9;  --tier-good-fg: #0F3D1B;
    --tier-fair-bg: #DFC7A3;  --tier-fair-fg: #4E2E00;
    --tier-poor-bg: #EAB3B3;  --tier-poor-fg: #7A1717;
    --tier-none-bg: var(--gray-200);
    --tier-none-fg: var(--gray-600);
}

[data-theme="dark"] [data-viewing="far"],
[data-theme="dark"][data-viewing="far"] {
    --tier-good-bg: #365849;  --tier-good-fg: var(--gray-000);
    --tier-fair-bg: #5D4F37;  --tier-fair-fg: var(--gray-000);
    --tier-poor-bg: #5D3F43;  --tier-poor-fg: var(--gray-000);
    --tier-none-bg: var(--gray-950);
    --tier-none-fg: var(--gray-400);
}

/* ============================================================
   DENSITY MODES
   Apply to a screen root. Never mix within one screen.
   ============================================================ */
[data-density="compact"]   { --row-height: 32px; --card-padding: 16px; --control-height: 32px; }
[data-density="comfortable"]{ --row-height: 40px; --card-padding: 24px; --control-height: 40px; }
[data-density="spacious"]  { --row-height: 56px; --card-padding: 32px; --control-height: 48px; --touch-min: 48px; }

/* ============================================================
   BASELINE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Non-negotiable: visible focus on everything focusable */
:focus-visible {
  outline: 2px solid var(--signal-info);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

/* Numeric values never change width as they update */
.value, td.numeric, .tabular {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}