/* 02-tokens.css: the single theme-token file (docs/improvements/06-morph-branding.md 5.1).
   Replaces index.html@cd3fd3f lines 18-31: since 06 T4a the legacy token block is gone and every stylesheet uses the
   role tokens of layer 3 (static rules R-B1 and R-B3a).
   1. Brand primitives: the Morph Colour Guidelines v2.1 values, alias targets only.
   2. Derived dark-UI primitives: this app's surfaces, borders and status hues; never used in logos.
   3. Semantic UI roles (06 3.4): components reference only these (and --morph-white-1000 for the toggle knob).
      --cta-background has exactly one consumer, .export-btn--primary (#export-zip; R-B5): Pivot Gold once per layout.
   4. Scene, canvas and status roles (06 T3, brand values since 06 T5, 06 3.8): read by theme/ThemeBridge.js into the
      theme App injects. Each resolves to #rrggbb and equals the Theme.js fallback of the leaves it binds (the U4 parity
      test keeps them equal). --scene-frame is the light panel frame and --scene-frame-on-light the dark one (06 6.7);
      --scene-overlay-halo is the Morph Black halo of every two-tone overlay and edge outline (D15).
      --status-off-center and --status-within also colour .status-pending and .status-ok, so the initial and the
      runtime status colours come from one token. --scene-face-front, --scene-face-back, --scene-normals and
      --scene-normals-face are spec 01's debug-view tokens with spec 01's values (01 4.6, CR-8; F6 changes none);
      --scene-wall-back follows with its key in 01 F1-5. --scene-pivot, --scene-pivot-selected and
      --scene-pivot-anchor are spec 03's pivot-marker cores (03 T1, 06 5.12); their halo is --scene-overlay-halo.
   Not a slice of the original <style> any more (css-slices.mjs --report-only lists the difference, 07 S7);
   link order = file number. */
:root {
    /* 1. Brand primitives: Morph Colour Guidelines v2.1. Alias targets only. */
    --morph-black-950: #0A0A0A;
    --morph-red-600: #C51622;
    --morph-white-1000: #FFFFFF;
    --morph-gold-500: #F2B705;
    --morph-neutral-50: #F7F7F5;
    --morph-neutral-600: #6C6C6C;
    --morph-neutral-200: #D4D4D4;

    /* 2. Derived dark-UI primitives (this app only; never used in logos). */
    --ui-grey-930: #111111;
    --ui-grey-910: #161616;
    --ui-grey-880: #1F1F1F;
    --ui-grey-850: #262626;
    --ui-grey-800: #333333;
    --ui-grey-400: #A3A3A3;
    --ui-red-400: #F2555A;
    --ui-green-400: #3DD68C;
    --ui-orange-400: #FF8640;

    /* 3. Semantic UI roles. Components reference only these. */
    --color-bg-app: var(--morph-black-950);
    --color-surface-1: var(--ui-grey-930);
    --color-surface-2: var(--ui-grey-910);
    --color-surface-hover: var(--ui-grey-880);
    --color-surface-overlay: rgba(17, 17, 17, 0.92);
    --color-scrim: rgba(10, 10, 10, 0.75);
    --color-border-subtle: var(--ui-grey-850);
    --color-border-strong: var(--ui-grey-800);
    --color-text-primary: var(--morph-neutral-50);
    --color-text-secondary: var(--ui-grey-400);
    --color-text-disabled: var(--morph-neutral-600);
    --color-accent: var(--morph-red-600);
    --color-on-accent: var(--morph-white-1000);
    --color-accent-text: var(--ui-red-400);
    --cta-background: var(--morph-gold-500);   /* exactly one consumer: .export-btn--primary */
    --color-on-cta: var(--morph-black-950);
    --color-control-active-bg: var(--morph-neutral-50);
    --color-on-control-active: var(--morph-black-950);
    --color-focus-ring: var(--morph-neutral-50);
    --color-success: var(--ui-green-400);
    --color-warning: var(--ui-orange-400);
    --color-warning-bg: rgba(255, 134, 64, 0.12);
    --color-warning-border: rgba(255, 134, 64, 0.4);
    --color-danger: var(--ui-red-400);
    --color-danger-bg: rgba(242, 85, 90, 0.12);
    --color-swatch-ring: rgba(255, 255, 255, 0.1);
    --shadow-overlay: 0 4px 20px rgba(0, 0, 0, 0.6);
    --font-ui: 'Montserrat', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* 4. Scene and canvas roles: read by theme/ThemeBridge.js. Values must be #rrggbb
          (or rgba(r, g, b, a) for 'css'-kind bindings, 06 5.5). */
    --scene-background: var(--morph-black-950);
    --scene-grid-center: #333333;
    --scene-grid-line: #1C1C1C;
    --scene-frame: var(--morph-neutral-200);        /* light frame: dark sections and texture content (06 6.7) */
    --scene-frame-on-light: var(--morph-black-950); /* dark frame: light sections (06 6.7) */
    --scene-camera-body: var(--morph-red-600);
    --scene-frustum: var(--morph-neutral-50);
    --scene-overlay-halo: var(--morph-black-950);   /* halo of every two-tone overlay and edge outline (06 D15) */
    --scene-safe-wall: var(--ui-green-400);
    --scene-safe-threshold: var(--morph-red-600);
    --scene-safe-clamped: var(--ui-orange-400);     /* 08 P2-5b: band vertices closer than D (the off-centre amber) */
    --scene-safe-line: var(--ui-red-400);
    --scene-safe-label: var(--ui-red-400);
    --scene-face-front: #2f6bff;
    --scene-face-back: #ff3344;
    --scene-normals: #b8f03c;
    --scene-normals-face: #ff4fd8;
    --scene-pivot: var(--morph-neutral-50);         /* 03 T1: the pivot marker's two-tone cores (06 5.12) */
    --scene-pivot-selected: var(--morph-red-600);
    --scene-pivot-anchor: var(--ui-grey-400);
    --canvas-background: var(--morph-black-950);
    --status-within: var(--color-success);       /* also used by .status-ok */
    --status-off-center: var(--color-warning);   /* also used by .status-pending */
    --status-exceeds: var(--color-danger);
}