/* ============================================================================
   TIMEPOINT Design System — v6.0  "Synthetic Time Travel — dark instrument"
   ----------------------------------------------------------------------------
   "Carved in marble, then backlit by an orrery."

   Out-of-time INSTRUMENT, not a SaaS template. Cybertruck-by-subtraction:
   a flat Void Black plane, ONE structural accent (Patinated Gold), data in
   JetBrains Mono, Cinzel for monuments, hairlines instead of shadow-cards,
   hard on/off controls, motion that only ever confirms state (<=200ms).

   Loaded ONLY when the SYNTHETIC_UI flag is ON (see app/config.py +
   base.html). Everything here is scoped under `body.synthetic-ui` so the
   v5.0 light theme (design-system.css) is byte-identical-unchanged when the
   flag is OFF. This sheet redefines the v5.0 token variables (and the
   base.html inline shell vars) so existing components re-skin to the dark
   instrument without rewriting their rules; a small set of instrument
   primitives + shell hardening follows.

   Source of record: reports/ux/UNIFIED_UX_PLAN.md §2 +
   reports/ux/DESIGN_LANGUAGE_AND_VIZ.md §1. Token source (design only, NOT
   ported code): timepoint-iphone-app/Sources/Utilities/Theme.swift.
   ============================================================================ */

/* ── 1. Token overrides — redefine the v5.0 :root palette to the dark set ── */
body.synthetic-ui {
    /* Backgrounds — Void Black plane, deep-indigo raised panels */
    --bg-void:       #050505;   /* Void Black — ~80% of every screen */
    --bg-deep:       #0A0F18;
    --bg-panel:      #0F1C2E;   /* Deep Indigo — raised panels */
    --bg-card:       #0F1C2E;
    --bg-card-hover: #1A2535;   /* Slightly lighter indigo */
    --bg-sidebar:    #050505;

    /* Text — selenite warm-white (peaks only), marble warm-grey (body) */
    --text-primary:  #A89F91;   /* Marble — primary body text */
    --text-secondary:#8C857A;
    --text-dim:      #6B655C;
    --ivory:         #F5F0E6;   /* Selenite — headings/peaks, <5% coverage */

    /* THE single structural accent — Patinated Gold. The v5.0 indigo
       "primary" is remapped onto gold so every existing primary control,
       link, and active state reads as the one accent. */
    --primary:       #D4AF37;
    --primary-hover: #E0BE50;
    --primary-dim:   #A6862A;
    --primary-ghost: rgba(212, 175, 55, 0.10);
    --primary-glow:  rgba(212, 175, 55, 0.14);

    /* Secondary accent — Cosmic Amber (highlight, not a second structural hue) */
    --secondary:     #E8C9A0;
    --secondary-dim: #C9A878;
    --secondary-ghost: rgba(232, 201, 160, 0.10);

    /* Status — muted, never saturated web-default red/green
       (sage / amber / terracotta, from the iPhone trait hues). */
    --success:       #8BAF7D;   /* muted sage */
    --success-ghost: rgba(139, 175, 125, 0.10);
    --warning:       #E8C9A0;   /* cosmic amber */
    --warning-ghost: rgba(232, 201, 160, 0.10);
    --error:         #C77B6B;   /* terracotta */
    --error-ghost:   rgba(199, 123, 107, 0.10);

    /* Gold accent (used by alpha-badge etc.) realigned to patinated gold */
    --gold:          #D4AF37;
    --gold-bright:   #E0BE50;
    --gold-dim:      #A6862A;
    --gold-ghost:    rgba(212, 175, 55, 0.10);

    /* Product accents → recede to the marble/gold/amber family */
    --violet:        #A78BFA;
    --emerald:       #8BAF7D;
    --rose:          #C77B6B;
    --ice:           #7EC8E3;
    --ice-dim:       #5FA9C4;
    --ice-ghost:     rgba(126, 200, 227, 0.10);

    /* Borders — marble @ 12% hairlines (instruments: lines, not elevation) */
    --border:        rgba(168, 159, 145, 0.12);
    --border-subtle: rgba(168, 159, 145, 0.07);
    --border-gold:   rgba(212, 175, 55, 0.28);

    /* Typography — Cinzel display, Inter body, JetBrains Mono data */
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Cinzel', 'Inter', system-ui, serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* Radius — instruments have hard corners; sm is the max */
    --radius-sm:    4px;
    --radius-md:    4px;
    --radius-lg:    4px;
    --radius-pill:  999px;

    /* Shadows — REMOVED in the dark theme (no shadow-cards). Hairlines
       carry separation; shadow tokens collapse to none so any component
       that still references them gets a flat panel, not a floating card. */
    --shadow-sm:    none;
    --shadow-md:    none;
    --shadow-lg:    none;

    /* Temporal-mode accents (shared with iPhone Theme.swift; semantic
       encodings used inside the visualizations, NOT general UI palette) */
    --mode-forward:    #D4AF37;   /* gold   — forward sim            */
    --mode-portal:     #7EC8E3;   /* ice    — PORTAL / backward      */
    --mode-branching:  #E8C9A0;   /* amber  — counterfactual branches*/
    --mode-cyclical:   #A78BFA;   /* purple                          */
    --mode-directorial:#8BAF7D;   /* sage                            */

    /* Resolution-depth ramp (TENSOR_ONLY→FULL_DETAIL) — one hue, rising luma */
    --depth-1: #3A4250;
    --depth-2: #5A6678;
    --depth-3: #8B9FBF;
    --depth-4: #B9A86A;
    --depth-5: #D4AF37;
    --depth-6: #F5F0E6;

    /* base.html inline shell vars (sidebar/topbar) — re-pointed to the dark
       instrument so the inline <style> in base.html re-skins with zero edits
       to its rules. */
    --sidebar-bg:        #050505;
    --sidebar-border:    rgba(168, 159, 145, 0.12);
    --sidebar-text:      #A89F91;
    --sidebar-text-hover:#F5F0E6;
    --sidebar-active:    #D4AF37;
    --sidebar-active-bg: rgba(212, 175, 55, 0.10);
    --topbar-bg:         rgba(5, 5, 5, 0.92);
    --topbar-border:     rgba(168, 159, 145, 0.12);
}

/* ── 2. Shell base — Void Black plane, marble text, antialiased ───────────── */
body.synthetic-ui {
    background: var(--bg-void);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Selection + scrollbar tuned to the instrument palette */
body.synthetic-ui ::selection { background: rgba(212, 175, 55, 0.30); color: #F5F0E6; }
body.synthetic-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
body.synthetic-ui ::-webkit-scrollbar-track { background: var(--bg-void); }
body.synthetic-ui ::-webkit-scrollbar-thumb {
    background: rgba(168, 159, 145, 0.18);
    border: 2px solid var(--bg-void);
    border-radius: 999px;
}
body.synthetic-ui ::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.40); }

/* ── 3. Type — Cinzel monuments, mono readouts ───────────────────────────── */
/* Cinzel display serif is the single "out-of-time" gesture — page titles and
   section monuments only, ALL-CAPS, wide tracking. Never UI labels. */
body.synthetic-ui h1,
body.synthetic-ui h2 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ivory);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
body.synthetic-ui h3,
body.synthetic-ui h4,
body.synthetic-ui h5,
body.synthetic-ui h6 {
    font-family: var(--font-body);
    color: var(--ivory);
    letter-spacing: 0;
}

/* All numbers / readouts / ids / hashes are monospace — the instrument tell. */
body.synthetic-ui .mono,
body.synthetic-ui .readout,
body.synthetic-ui code,
body.synthetic-ui kbd,
body.synthetic-ui [data-readout] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
body.synthetic-ui code {
    background: var(--bg-card);
    color: var(--secondary);
    border: 1px solid var(--border);
}

/* ── 4. Shell hardening — flat panels, hairlines, no shadow-cards ─────────── */
/* Strip residual drop-shadows + heavy radii from any shell card so panels
   read as flat planes separated by hairlines, not elevation. Scoped to the
   shell chrome (sidebar / topbar / page-content direct cards). */
body.synthetic-ui .sidebar,
body.synthetic-ui .top-bar,
body.synthetic-ui .main-area {
    box-shadow: none;
}
body.synthetic-ui .sidebar { border-right: 1px solid var(--border); }
body.synthetic-ui .top-bar { border-bottom: 1px solid var(--border); }

/* Alpha banner — re-skin to the dark plane (it has hardcoded light colors) */
body.synthetic-ui .alpha-banner {
    background: #0A0F18;
    border-bottom: 1px solid var(--border);
}
body.synthetic-ui .alpha-text { color: var(--text-dim); }
body.synthetic-ui .alpha-badge { color: #050505; background: var(--gold); }
body.synthetic-ui .alpha-cta { color: var(--gold); }
body.synthetic-ui .alpha-cta:hover { color: var(--gold-bright); }
body.synthetic-ui .alpha-close { color: var(--text-dim); }
body.synthetic-ui .alpha-close:hover { color: var(--ivory); }

/* Topbar avatar + "Get Started" CTA in base.html use inline indigo gradients;
   override them to the single gold accent so the shell stays monochrome+gold. */
body.synthetic-ui .top-bar-avatar {
    background: var(--primary-ghost);
    color: var(--gold);
    border: 1px solid var(--border-gold);
}
body.synthetic-ui .top-bar-dropdown { background: var(--bg-card); border: 1px solid var(--border); }

/* Topbar search — flat instrument field, hard corners, hairline */
body.synthetic-ui .top-bar-search input {
    background: var(--bg-void);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}
body.synthetic-ui .top-bar-search input::placeholder { color: var(--text-dim); }
body.synthetic-ui .top-bar-search input:focus {
    outline: none;
    border-color: var(--border-gold);
}

/* Sidebar active item — a 1px gold underline/inset, not a filled pill */
body.synthetic-ui .sidebar a,
body.synthetic-ui .sidebar .nav-link {
    border-radius: var(--radius-sm);
    transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}

/* ── 5. Instrument primitives (additive — buildable on HTMX/Alpine) ───────── */
/* Readout — a mono value + caps label; replaces the "stat card". */
body.synthetic-ui .readout-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--gold);
    font-size: 1.5rem;
    line-height: 1.1;
}
body.synthetic-ui .readout-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.625rem;
    color: var(--text-dim);
}

/* Switch-rail — hard on/off detents (no ambiguous hover-only affordance). */
body.synthetic-ui .switch-rail {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
body.synthetic-ui .switch-rail > .switch {
    flex: 1;
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    background: var(--bg-void);
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
body.synthetic-ui .switch-rail > .switch:last-child { border-right: none; }
body.synthetic-ui .switch-rail > .switch[aria-pressed="true"],
body.synthetic-ui .switch-rail > .switch.is-on {
    background: var(--primary-ghost);
    color: var(--gold);
}

/* Resolution dial — discrete 1..6 stepper bound to a ResolutionLevel. */
body.synthetic-ui .resolution-dial {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}
body.synthetic-ui .resolution-dial > .step {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
    background: var(--depth-1);
    cursor: pointer;
    transition: background 160ms var(--ease-out);
}
body.synthetic-ui .resolution-dial > .step.is-active { background: var(--gold); }

/* Temporal-mode pill — semantic encoding (forward/portal/branching/...) */
body.synthetic-ui .mode-pill {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.625rem;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
}
body.synthetic-ui .mode-pill.mode-forward    { color: var(--mode-forward); }
body.synthetic-ui .mode-pill.mode-portal     { color: var(--mode-portal); }
body.synthetic-ui .mode-pill.mode-branching  { color: var(--mode-branching); }
body.synthetic-ui .mode-pill.mode-cyclical   { color: var(--mode-cyclical); }
body.synthetic-ui .mode-pill.mode-directorial{ color: var(--mode-directorial); }

/* ── 6. Motion discipline — state-confirming only, <=200ms ────────────────── */
/* A 1px gold underline that slides under the active control (the one allowed
   chrome motion). Ambient loops / pulses / portal swirls are banned by policy
   and simply not defined here. */
body.synthetic-ui .underline-slide {
    position: relative;
}
body.synthetic-ui .underline-slide::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 160ms var(--ease-out);
}
body.synthetic-ui .underline-slide.is-active::after { transform: scaleX(1); }

/* Honor reduced-motion: drop the only chrome transitions entirely. */
@media (prefers-reduced-motion: reduce) {
    body.synthetic-ui .underline-slide::after,
    body.synthetic-ui .switch-rail > .switch,
    body.synthetic-ui .resolution-dial > .step { transition: none; }
}