/* ═══════════════════════════════════════════════════════════════
   Backcandle · Design Tokens
   Single source of truth for colors, typography, spacing, motion.
   Extracted from base.html.twig — referenced by every app page.
   ═══════════════════════════════════════════════════════════════ */

/* Global Lucide icon sizing. Lives here (not base.css) because tokens.css is
   the one stylesheet loaded on EVERY layout — base pages via app.min.css, and
   the standalone layouts (landing, static, replay) directly. Lucide ships at
   24×24 stroke-width 2; size it to 1em like the old Font Awesome glyphs so
   icons never balloon in nav/header/buttons. Per-component svg rules (e.g.
   .term-top-btn svg) are more specific and still win where a fixed px is set. */
[data-lucide], svg.lucide {
    width: 1em; height: 1em;
    stroke-width: 1.75;
    vertical-align: -0.125em;
}

/* ── Tokens · Dark ── */
:root, [data-theme="dark"] {
    /* ── Stacking scale ─────────────────────────────────────────────────
       Page-level layers only (component-local stacking 0–200 stays literal).
       Values mirror the pre-token literals — introducing the scale changed
       nothing visually. New code uses tokens, not raw numbers. */
    --z-nav:      1000;  /* fixed chrome: mobile nav, skip-link, panel pins */
    --z-modal:    900;   /* base modal layer (indicators editor) */
    --z-modal-2:  1000;  /* standard overlays: SL/TP, billing, … */
    --z-modal-3:  1100;  /* dialogs stacked above other overlays (confirm, sheets) */
    --z-modal-4:  1200;  /* rules modal */
    --z-popover:  1300;  /* notify popovers above every modal */
    --z-toast:    9999;  /* toasts, tooltips, cookie banner — always on top */

    --bg-base:        #07080a;
    --bg-surface:     #0b0d10;
    --bg-surface-h:   #10131a;
    --bg-elevated:    #10131a;
    --bg-input:       #07080a;

    --border-dim:     #1a1e26;
    --border-muted:   #262c38;
    --border-active:  #383e4c;

    --text-main:      #f6f7f9;
    --text-sub:       #98a0b0;
    --text-muted:     #5b6272;
    --text-faint:     #383e4c;
    --txt:            var(--text-main); /* alias for logo.css (bc-logo component, ported byte-for-byte from handoff) */

    --accent:         #26a69a;
    --accent-h:       #2fc4b6;
    --accent-dim:     rgba(38,166,154,0.09);
    --accent-border:  rgba(38,166,154,0.4);
    --accent-fg:      #04110f;
    --accent-solid:   #26a69a;

    --green:          #26a69a;
    --green-dim:      rgba(38,166,154,0.09);
    --green-border:   rgba(38,166,154,0.4);

    --red:            #ef5350;
    --red-dim:        rgba(239,83,80,0.09);
    --red-border:     rgba(239,83,80,0.4);

    --pos:            #26a69a;
    --pos-dim:        rgba(38,166,154,0.09);
    --pos-border:     rgba(38,166,154,0.4);
    --neg:            #ef5350;
    --neg-dim:        rgba(239,83,80,0.09);
    --neg-border:     rgba(239,83,80,0.4);

    --orange:         #e0a94e;
    --orange-dim:     rgba(224,169,78,0.08);
    --orange-border:  rgba(224,169,78,0.4);

    --font-sans:  'IBM Plex Mono', monospace;
    --font-mono:  'IBM Plex Mono', monospace;
    --grad:       var(--accent-solid);

    --nav-h:      46px;
    --sidebar-w:  148px;

    /* Blackbox: zero radius everywhere except the logo component. */
    --r-sm:   0px;
    --r-md:   0px;
    --r-lg:   0px;
    --r-xl:   0px;
    --r-pill: 0px;

    /* Blackbox: no drop shadows. Kept as empty tokens (not deleted) so any
       remaining `box-shadow: var(--shadow-*)` call site resolves to `none`
       instead of breaking — call sites are swept to remove the property
       entirely in later phases, this is a safety net during the transition. */
    --shadow-pop: none;
    --shadow-md:  none;
    --shadow-sm:  none;
    --highlight-top: none;

    --t-fast: 0.1s;
    --t-base: 0.15s;

    --dot-color: transparent;
    --glow-1:    transparent;
    --glow-2:    transparent;

    --grid-line: transparent;
    --glow-g:    transparent;
    --inset-hi:  none;
}

/* Light palette, Blackbox style (zero radius, hairline borders, no shadow).
   Currently reachable via the site-wide theme toggle; a later task scopes
   this to the replay-session page only and removes the global toggle. */
[data-theme="light"] {
    --bg-base:        #f4f5f3;
    --bg-surface:     #ffffff;
    --bg-surface-h:   #eef0ee;
    --bg-elevated:    #eef0ee;
    --bg-input:       #ffffff;

    --border-dim:     #dcdfd9;
    --border-muted:   #c7cbc3;
    --border-active:  #9aa093;

    --text-main:      #1b1e1a;
    --text-sub:       #4d524a;
    --text-muted:     #7a8074;
    --text-faint:     #a8ada2;
    --txt:            var(--text-main); /* alias for logo.css (bc-logo component, ported byte-for-byte from handoff) */

    --accent:         #0a8a7a;
    --accent-h:       #08796b;
    --accent-dim:     rgba(10,138,122,0.10);
    --accent-border:  rgba(10,138,122,0.4);
    --accent-fg:      #ffffff;
    --accent-solid:   #0a8a7a;

    --green:          #0a8a7a;
    --green-dim:      rgba(10,138,122,0.10);
    --green-border:   rgba(10,138,122,0.4);

    --red:            #c53d3a;
    --red-dim:        rgba(197,61,58,0.10);
    --red-border:     rgba(197,61,58,0.4);

    --pos:            #0a8a7a;
    --pos-dim:        rgba(10,138,122,0.10);
    --pos-border:     rgba(10,138,122,0.4);
    --neg:            #c53d3a;
    --neg-dim:        rgba(197,61,58,0.10);
    --neg-border:     rgba(197,61,58,0.4);

    --orange:         #a6742a;
    --orange-dim:     rgba(166,116,42,0.10);
    --orange-border:  rgba(166,116,42,0.4);

    --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-xl: 0px; --r-pill: 0px;
    --shadow-pop: none; --shadow-md: none; --shadow-sm: none; --highlight-top: none;

    --dot-color: transparent;
    --glow-1: transparent; --glow-2: transparent;
    --grid-line: transparent; --glow-g: transparent; --inset-hi: none;
}

/* Light-theme selection: match new accent.
   :where() keeps this at zero specificity so solid-background buttons that
   are also <a> tags (.btn-replay, .btn-primary, ...) can still override the
   hover color with a plain single-class rule — otherwise the extra `a` in
   this selector outranks `.btn-replay:hover` and the label vanishes into
   the button's own background on hover. */
:where([data-theme="light"]) a            { color: var(--accent); }
:where([data-theme="light"]) a:hover      { color: var(--accent-h); }
[data-theme="light"] ::selection  { background: var(--accent); color: #fff; }

/* ── Bootstrap variable bridge ──
   Bootstrap ships in @layer vendor (see tools/build-assets.mjs), so our own
   unlayered rules win over its normal declarations without !important. Its
   !important *utilities* still win, though — for the few we re-skin, point
   Bootstrap's own CSS variable at our token instead of fighting the cascade.
   .text-muted resolves to var(--bs-secondary-color); aim it at --text-muted so
   it tracks the active theme. This :root is unlayered → beats Bootstrap's. */
:root { --bs-secondary-color: var(--text-muted); }

/* ── Layout & spacing (theme-independent) ── */
:root {
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

    --page-pad-mobile:  16px;
    --page-pad-desktop: 36px;

    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top:    env(safe-area-inset-top, 0px);
    --tabbar-h:    56px;

    /* documentation only — CSS can't use vars in media queries:
       --bp-mobile 640px / --bp-tablet 1024px */
}
</content>
</invoke>