/* ─── Design tokens ───────────────────────────────────────────────────────────
 *
 * Every colour, radius, type step, spacing step and layout constant the app
 * uses, in one place. The values are the Rapid Fusion unified palette
 * ("Graphite & Steel", the reference implementation being Cerberus_UI's
 * css/cerberus-design-tokens.css), shared with the Fleet dashboard and the
 * on-machine UI so the three look like one product: neutral graphite chrome,
 * steel for selected / operator-set state, saturated colour only for status,
 * the RF plum only for the logo and the one key action per screen.
 *
 * Nothing outside this file may hard-code a colour or a radius; the guard
 * test tests/test_frontend_style_tokens.py enforces it. (3D viewer / heat-map
 * data colours live in js/viewer_colors.js, and the drawing workspace keeps
 * its own fixed light palette, the --fz-* tokens below.)
 *
 * They live apart from style.css because style.css is the *tool page* shell - a
 * fixed header over self-scrolling panes, with the root clipped so no page
 * scrollbar can appear. The home page is an ordinary scrolling document and
 * must not inherit any of that, but it does need these tokens. Splitting them
 * out is what lets both have exactly what they need and nothing more.
 */

:root {
    /* ── Dark theme (the default) ── graphite surfaces, hairline borders,
       steel for the primary action, focus and selection. */
    color-scheme: dark;
    --bg-app:        #0b0c0e;
    --bg-sidebar:    #141619;
    --bg-card:       #1c1f23;
    --bg-elevated:   #25292e;
    --bg-elevated-hover: #2c3137;
    --bg-header:     #111316;
    --bg-input:      #0b0c0e;
    --bg:            var(--bg-app);
    --bg-panel:      var(--bg-sidebar);
    --bg-surface:    var(--bg-card);
    --hover:         rgba(232, 234, 237, 0.045);
    --hover-strong:  rgba(232, 234, 237, 0.08);
    --bg-hover:      var(--hover);
    --veil-rgb:      232, 234, 237;
    --overlay-bg:    rgba(20, 22, 25, 0.92);
    --viewer-bg:     #1c1f23;

    /* RF branding: the logo's plum. Logo and favicon artwork, and the one key
       action per screen; never chrome. */
    --brand:            #A74E9E;
    --rf-brand:         #A74E9E;
    --rf-brand-light:   #BB6DB3;
    --rf-brand-deep:    #2e2432;
    --rf-brand-edge:    #5a3859;
    --rf-brand-ink:     #e3cfe0;
    --rf-brand-rgb:     167, 78, 158;

    /* Key action: the ONE most important button per screen (.rf-key-action).
       Dark plum with the brand rim, the same in both themes. */
    --key-action-bg:            #2e2432;
    --key-action-border:        #A74E9E;
    --key-action-text:          #e3cfe0;
    --key-action-bg-hover:      #372b3c;
    --key-action-border-disabled: #5a3859;
    --key-action-text-disabled: rgba(227, 207, 224, 0.38);

    /* Steel: primary actions, focus, selection */
    --primary:       #6e8196;
    --primary-light: #a9b8c8;
    --primary-dark:  #5a6b7d;
    --primary-rgb:   110, 129, 150;
    --accent:        var(--primary);
    --accent-hover:  var(--primary-light);
    --accent-rgb:    var(--primary-rgb);
    --on-accent:     #ffffff;
    --on-accent-rgb: 255, 255, 255;
    --focus-ring:    #a9b8c8;
    --selected-bg:   #2f3640;
    --selected-ring: #a9b8c8;

    /* Buttons */
    --btn-primary-bg:     #5a6b7d;
    --btn-primary-border: #a9b8c8;
    --btn-primary-hover:  #6e8196;
    --btn-primary-text:   #ffffff;
    --btn-bg:             #25292e;
    --btn-border:         rgba(232, 234, 237, 0.16);
    --btn-hover:          #2c3137;
    --btn-text:           #e8eaed;
    --btn-danger-bg:      #b3262c;
    --btn-danger-border:  #d0444a;
    --btn-danger-hover:   #c22f35;
    --btn-warning-bg:     #9a5a0c;
    --btn-warning-border: #c27a1c;
    --btn-warning-hover:  #a8640f;
    --btn-on-status:      #ffffff;

    /* Text */
    --text-primary:  #e8eaed;
    --text-secondary:#8e959e;
    --text-dim:      #5f666f;
    --text-disabled: var(--text-dim);

    /* Functional (status only) */
    --color-success: #46b16c;
    --color-error:   #e5484d;
    --color-warning: #f2a93b;
    --color-info:    #a9b8c8;
    --success-rgb:   70, 177, 108;
    --error-rgb:     229, 72, 77;
    --warning-rgb:   242, 169, 59;
    --dev-ok:        var(--color-success);
    --dev-warn:      var(--color-warning);
    --dev-bad:       var(--color-error);

    /* Borders */
    --border:        rgba(232, 234, 237, 0.09);
    --border-light:  rgba(232, 234, 237, 0.16);

    /* Shade: shadows and modal scrims (black in both themes) */
    --shadow-rgb:    0, 0, 0;
    --scrim:         rgba(0, 0, 0, 0.6);

    /* HUD: labels and overlays drawn over the 3D viewer, dark whatever the
       page theme so they read over any model. */
    --hud-bg-rgb:    8, 10, 16;
    --hud-text:      #eaf1ff;
    --hud-accent:    #9fd4ff;

    /* Viewer / data colours that also appear in page chrome (legends, snap
       markers, measurement read-outs). The same values as js/viewer_colors.js. */
    --viz-select:        #ffd700;
    --viz-select-ink:    #1a1a1a;
    --viz-measure:       #ffff00;
    --viz-measure-rgb:   255, 255, 0;
    --viz-angle:         #37d0ff;
    --viz-angle-rgb:     55, 208, 255;
    --viz-pick:          #ff5fa2;
    --viz-pick-rgb:      255, 95, 162;
    --viz-cloud:         #5eead4;
    --viz-cloud-rgb:     94, 234, 212;
    --viz-part:          #4d7cb5;
    --viz-cad:           #22c55e;
    --viz-probed:        #a855f7;
    --viz-target:        #e07b39;
    --viz-heat-1:        #1c7ed6;
    --viz-heat-2:        #22b8cf;
    --viz-heat-3:        #37b24d;
    --viz-heat-4:        #f59f00;
    --viz-heat-5:        #e03131;
    --viz-heat-ink:      #111111;
    --viz-res-low:       #ef4444;
    --viz-res-mid:       #22c55e;
    --viz-res-high:      #f59e0b;

    /* Drawing workspace (reverse.html): light, as CAD drawing workspaces are,
       whatever the page theme - so these are the same in both themes. */
    --fz-accent:        #4f5f71;
    --fz-accent-hover:  #3e4b59;
    --fz-accent-rgb:    79, 95, 113;
    --fz-ink:           #2b2f36;
    --fz-ink-rgb:       43, 47, 54;
    --fz-ink-strong:    #222222;
    --fz-dim:           #6b7280;
    --fz-line:          #d6d9de;
    --fz-bg:            #f4f5f7;
    --fz-paper:         #ffffff;
    --fz-ribbon:        #fbfbfc;
    --fz-sep:           #eceef1;
    --fz-sep-strong:    #e3e5e8;
    --fz-head:          #f1f3f5;
    --fz-field-border:  #cfd3d8;
    --fz-hover:         #eef1f5;
    --fz-hover-border:  #c9d2dc;
    --fz-selected:      #dde4ec;
    --fz-icon:          #4f5f71;
    --fz-icon-muted:    #5c6b7f;
    --fz-nav-ink:       #4a5260;
    --fz-play-ink:      #3d4550;
    --fz-mark-border:   #b9c3cf;
    --fz-redo:          #9aa3ae;
    --fz-disabled:      #b4b8be;
    --fz-canvas:        #b9bec5;
    --fz-driving:       #1b4fa0;
    --fz-ok:            #1f8f5b;
    --fz-error:         #cc3a33;
    --fz-ai:            #A74E9E;
    --fz-appbar:        #2f3237;
    --fz-appbar-text:   #e9ebee;
    --fz-appbar-dim:    #a9aeb6;
    --fz-appbar-x:      #c9ccd1;
    --fz-appbar-chip:   #3a3e45;
    --fz-appbar-chip-border: #5b6068;
    --fz-status-error:  #ff9b8f;
    --fz-status-ai:     #e3cfe0;
    --fz-file-step:     #4f5f71;
    --fz-file-fusion:   #e8730c;

    /* Type: Karla, the RF face (vendored: vendor/fonts/karla.css) */
    --font-ui:       'Karla', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Typography + spacing (Apollo clamp scale) */
    --font-mono:     'SF Mono', 'Monaco', 'Consolas', monospace;
    --base-font-size: clamp(12px, 1.2vw, 16px);
    --small-font-size: clamp(10px, 1.0vw, 14px);
    --large-font-size: clamp(14px, 1.4vw, 18px);
    --small-spacing: clamp(8px, 0.8vw, 12px);
    --medium-spacing: clamp(12px, 1.2vw, 16px);
    --large-spacing: clamp(16px, 1.6vw, 24px);
    --button-height: clamp(40px, 4.0vw, 52px);

    /* Radius, elevation and motion, matching the Fleet's scale. */
    --radius-2xs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 20px;
    --radius-full: 999px;
    --radius-round: 50%;
    --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --z-sticky: 200;

    /* Layout. --safe-top is the iPhone status-bar/notch inset (0 elsewhere);
       every fixed element at the top of the screen must offset by
       --header-offset, never --header-height, or Safari's chrome sits on the
       controls and the kiosk layout (overflow: hidden) gives no way to scroll
       them back into reach. */
    --safe-top: env(safe-area-inset-top, 0px);
    --header-height: clamp(56px, 5vw, 72px);
    --header-offset: calc(var(--header-height) + var(--safe-top));
    --sidebar-width: clamp(360px, 28vw, 420px);
}

/* ── Light theme ── as CAD tools are: a light grey canvas, white panels,
   hairline borders, dark ink, steel for the primary action; colour only where
   it means something. Chosen in the header (sun / moon), or following the
   system when not chosen. The key action and the logo are as in dark. */
:root[data-theme="light"] {
    color-scheme: light;
    --bg-app:        #eef0f3;
    --bg-sidebar:    #ffffff;
    --bg-card:       #ffffff;
    --bg-elevated:   #f7f8fa;
    --bg-elevated-hover: #eef0f3;
    --bg-header:     #ffffff;
    --bg-input:      #ffffff;
    --hover:         rgba(16, 24, 40, 0.045);
    --hover-strong:  rgba(16, 24, 40, 0.075);
    --veil-rgb:      16, 24, 40;
    --overlay-bg:    rgba(255, 255, 255, 0.92);
    --viewer-bg:     #e6e8ec;

    --primary:       #4f5f71;
    --primary-light: #6e8196;
    --primary-dark:  #3e4b59;
    --primary-rgb:   79, 95, 113;
    --focus-ring:    #4f5f71;
    --selected-bg:   #e3e8ee;
    --selected-ring: #4f5f71;

    --btn-primary-bg:     #4f5f71;
    --btn-primary-border: #3e4b59;
    --btn-primary-hover:  #3e4b59;
    --btn-primary-text:   #ffffff;
    --btn-bg:             #ffffff;
    --btn-border:         rgba(16, 24, 40, 0.18);
    --btn-hover:          #f2f4f7;
    --btn-text:           #1c2028;
    --btn-danger-bg:      #c4282e;
    --btn-danger-border:  #a51f25;
    --btn-danger-hover:   #a51f25;

    --text-primary:  #1c2028;
    --text-secondary:#5c6370;
    --text-dim:      #969ca7;

    --color-success: #1f8f5b;
    --color-error:   #cc3a33;
    --color-warning: #a8650a;
    --color-info:    #4f5f71;
    --success-rgb:   31, 143, 91;
    --error-rgb:     204, 58, 51;
    --warning-rgb:   168, 101, 10;

    --border:        rgba(16, 24, 40, 0.1);
    --border-light:  rgba(16, 24, 40, 0.18);
    --shadow-panel:  0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 14px rgba(16, 24, 40, 0.06);
    --shadow-pop:    0 8px 24px rgba(16, 24, 40, 0.14);
    --shadow-modal:  0 20px 60px rgba(16, 24, 40, 0.22);
    --scrim:         rgba(16, 24, 40, 0.45);
}