/**
 * base.css - Core Variables, Reset, and Scrollbar Styles
 * Codex Platform - CSS Module 1/4
 */

/* P6 §6.3.7 — JSON-config-driven CSS tokens.
 *
 * `generated-tokens.css` is produced by `tools/generate-css-tokens.py` from
 * `tokens.config.json` (JSON SSOT) on every server start and every VM
 * redeploy. It is gitignored. The inline `:root` token rail below remains
 * as the build-time fallback with IDENTICAL values, so the bundle is
 * always-renderable even on a fresh clone before the generator has run.
 *
 * Cascade note: `@import` resolves BEFORE the rest of this file, so the
 * inline `:root` declarations later in this file are AUTHORITATIVE when
 * present. Generated values are inert defaults until something downstream
 * overrides them via the same `:root` namespace — the regression locked by
 * `live-status-bar-geometry.test.mjs` case #1. */
@import url('generated-tokens.css');

/* =============================================
   CSS VARIABLES - DESIGN TOKENS
   ============================================= */

/* Dark Theme (default) */
:root {
  /* Colors - Background.
     Warmed to the --dcx-* brand palette (SSOT: tokens.config.json). Change a
     value there → both themes update. --bg-primary paints the page canvas
     (body + MAIN.chat-container). The locked mock's page background measures
     rgb(248,245,239) = the warm GROUND surface (mock --ground), with cards/
     header/note sitting brighter on --paper on top. So the canvas maps to
     --dcx-surface-sunken (light #f8f5ef / dark #15140f), NOT --dcx-surface
     (paper) — paper would erase card separation. This corrects a defect where
     the canvas was left pure-neutral white/#1e1e1e while every surface on top
     had gone warm, so the app read as warm islands on a white sheet. */
  --bg-primary: var(--dcx-surface-sunken); /* page canvas = warm ground (mock --ground) */
  --bg-secondary: var(--dcx-surface-raised);
  --bg-tertiary: var(--dcx-border);
  --bg-hover: var(--dcx-border-strong);
  /* --bg-elevated was only ever declared inside the always-dark .activity-drawer
     block, so var(--bg-elevated) fell back to the cool #252540 anywhere else.
     No live leak today (its sole consumer .act-badge lives in the drawer) but an
     undefined token that falls back cool is the exact shape of the --accent-color
     bug below — publish it warm here so no future consumer can leak. */
  --bg-elevated: var(--dcx-surface-raised);
  
  /* Colors - Text.
     Warm ink from the SSOT (--dcx-ink). Previously a pinned neutral (#e0e0e0)
     that was invisible on the landing because every text leaf overrides to
     warm, but any non-overriding text fell through cool — closing that latent
     trap at the token so the whole app inherits warm ink from one place. */
  --text-primary: var(--dcx-ink);
  --text-secondary: var(--dcx-ink-2);
  --text-muted: var(--dcx-ink-3);
  
  /* Colors - Accent (the one saturated brand colour — warm green) */
  --accent-primary: var(--dcx-accent);
  /* --accent-color was globally UNSET — declared only inside the always-dark
     .activity-drawer. So every var(--accent-color, #3b82f6 / #7c3aed) elsewhere
     (focus rings, primary buttons, active states) painted its hardcoded cool
     fallback. Publish it warm here so the whole family resolves to brand green
     from one place. The drawer's own scoped --accent-color still wins inside it
     (higher specificity), so that owner-approved always-dark block is unchanged. */
  --accent-color: var(--dcx-accent);
  --accent-hover: var(--dcx-accent-hover);
  --accent-success: var(--dcx-success);
  --accent-warning: var(--dcx-warning);
  --accent-error: var(--dcx-danger);
  
  /* Colors - Borders & Shadows */
  --border-color: var(--dcx-border);
  --shadow-color: var(--dcx-card-shadow);
  
  /* Colors - Messages */
  --user-message-bg: color-mix(in srgb, var(--dcx-accent) 9%, var(--dcx-surface));
  --user-message-fg: var(--dcx-ink);
  --user-message-fg-muted: var(--dcx-ink-2);
  --user-message-border: color-mix(in srgb, var(--dcx-accent) 22%, var(--dcx-border));
  --assistant-message-bg: var(--dcx-surface-raised);
  
  /* Colors - Code */
  --code-bg: var(--dcx-surface-sunken);

  /* =========================================================================
     GLOBAL --dc-* ALIASES (dark defaults)
     The warm --dc-* family was originally scoped to the four landing selectors
     (#welcomeMessage/.input-container/.app-header/.left-nav-rail). That left
     off-landing warm surfaces — the Copilot Insights panel (#debugPanel), the
     account dropdown, dense wells — computing var(--dc-*) as INVALID, so they
     fell back to cool grey. Publishing the general roles here on :root (and the
     light values in themes.css [data-theme="light"]) lets every var(--dc-*)
     consumer resolve app-wide from the one SSOT (--dcx-*). The landing does not
     move: its scoped blocks below are higher-specificity and hold identical
     values, so they still win on landing elements (verified pixel-identical).
     Rail-only capability-mark hues (--dc-hue-t/e/p, --dc-mark-neutral-*) stay
     scoped by design. ========================================================= */
  --dc-paper: var(--dcx-surface);
  --dc-band: var(--dcx-surface-raised);
  --dc-ground: var(--dcx-surface-sunken);
  --dc-sunk: var(--dcx-surface-recessed);
  --dc-line: var(--dcx-border);
  --dc-line-hover: var(--dcx-border-strong);
  --dc-ink: var(--dcx-ink);
  --dc-ink-2: var(--dcx-ink-2);
  --dc-ink-3: var(--dcx-ink-3);
  --dc-accent: var(--dcx-accent);
  --dc-card-shadow: var(--dcx-card-shadow);
  --dc-hue-u: var(--dcx-success);
  --dc-hue-s: var(--dcx-warning);
  /* --accent (bare, no prefix) was NEVER declared anywhere in the codebase, so
     every var(--accent, #0078d4) / var(--accent, #4db2ff) consumer (datafix
     chips, datafix/roles active-tab text + underline, codex-select focus
     ring) always fell through to its hardcoded Windows/Google-blue fallback —
     the same "undefined token paints cool" shape as the --accent-color and
     --bg-elevated fixes above. Publishing it warm here fixes that whole
     family from one place; no consumer needs to change. */
  --accent: var(--dcx-accent);
  
  /* Colors - Scrollbar */
  --scrollbar-thumb: var(--dcx-border-strong);
  --scrollbar-track: var(--dcx-surface-raised);
  
  /* Native form-control theming: unset accent-color left every
     native checkbox/radio/range/progress AND the <select> option-list
     highlight to the browser default (Windows/Chromium blue #0078d4), most
     visibly in the "Give Kudos" modal's open dropdown. Pinning it warm here
     covers the whole native-control family app-wide; scoped surfaces (e.g.
     the always-dark .activity-drawer) still resolve their own local tokens
     first if they ever override accent-color directly. */
  accent-color: var(--dcx-accent);
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-round: 50%;
  
  /* Typography — family stacks resolve from the type SSOT (value-identical). */
  --font-family: var(--dcx-font-sans);
  --font-mono: var(--dcx-font-mono);
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.25rem;
  --font-size-heading-1: 1.75rem;
  --font-size-heading-2: 1.5rem;
  --font-size-heading-3: 1.25rem;
  --font-size-heading-4: 1.125rem;
  --font-size-heading-5: 1rem;
  --font-size-heading-6: 0.9rem;
  
  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-tooltip: 1001;
  --z-overlay: 10000;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Live-status-bar (P6 §6.4 — 21 tokens). SSOT = `tokens.config.json`;
     these inline values are the build-time fallback (identical to JSON).
     DO NOT introduce a 22nd token here without bumping tokens.config.json
     `$schema-version` per §6.3.7 schema rule. */
  --lsb-height: 56px;
  --lsb-padding-x: 14px;
  --lsb-chip-rail-padding-y: 12px;
  --presence-chip-size: 34px;
  --presence-avatar-size: 24px;
  --presence-chip-gap: 8px;
  --presence-chip-count-size: 14px;
  --presence-chip-count-offset-y: -2px;
  --presence-chip-count-offset-x: -4px;
  --presence-chip-count-bg: #ff3b30;
  --presence-chip-count-fg: #ffffff;
  --presence-chip-count-border-width: 1.5px;
  --presence-chip-count-border-color: var(--bg-secondary);
  --presence-chip-count-font-size: 9.5px;
  --presence-chip-count-z: 2;
  --presence-speaker-ring-width: 3px;
  --presence-speaker-ring-color: var(--accent-success);
  --presence-speaker-ring-clearance: 6px;
  --presence-speaker-pulse-duration: 1.6s;
  --presence-speaker-pulse-blur-min: 0px;
  --presence-speaker-pulse-blur-max: 6px;
}

/* `accent-color` is spec'd for checkbox/radio/range/
   progress, NOT the <select> option-list itself — on Windows Chrome that
   open popup's highlighted-option background still comes from the OS theme
   color (#0078d4) unless authored CSS overrides it directly. Belt-and-braces
   fix per the brief: style the checked option explicitly so the "Give Kudos"
   dropdown (and every other native <select>) highlights warm instead of
   Windows blue, matching accent-color everywhere else. */
select option:checked,
select option:hover {
  background: var(--dcx-accent);
  color: #ffffff;
}

/* =============================================
   LANDING / COMPOSER WARM PALETTE (DARK DEFAULT)
   Scoped ONLY to the welcome/composer, title bar, and compact navigation
   rail - this is a deliberately narrow surface, not a global repaint (see
   themes.css for the light override and the matching comment there for how
   a future owner widens this app-wide in one line per file).
   Values are NOT the mock's own accent (#0E6B4F fails at 2.63:1 on this
   dark paper) - they are a lightened, hand-verified dark companion
   palette. See PLAN/report for full contrast measurements.
   ============================================= */

#welcomeMessage,
.input-container,
.app-header,
.left-nav-rail {
  /* SSOT wiring: these were the harvest source for --dcx-*, so each var()
     resolves to the SAME value this block held before — the landing does not
     move a pixel, but the warm identity now flows from one definition. */
  --dc-ground: var(--dcx-surface-sunken);
  --dc-paper: var(--dcx-surface);
  --dc-band: var(--dcx-surface-raised);
  --dc-line: var(--dcx-border);
  --dc-line-hover: var(--dcx-border-strong);
  --dc-ink: var(--dcx-ink);
  --dc-ink-2: var(--dcx-ink-2);
  --dc-ink-3: var(--dcx-ink-3);
  --dc-accent: var(--dcx-accent);
  --dc-card-shadow: rgba(0, 0, 0, 0.32); /* landing-scoped literal locked by p2-home test — value == --dcx-card-shadow (dark) */
  --dc-hue-u: var(--dcx-success);
  --dc-hue-t: #6fa8dc;
  --dc-hue-e: #a794d9;
  --dc-hue-s: var(--dcx-warning);
  --dc-hue-p: #8fa0ac;

  /* Dark-only re-tint targets for the LOCKED capability-mark SVGs (js/app.js
     RAIL_SHAPES, ~L205-260). The 5 accent hue fills stay theme-invariant by
     design (owner: "this is gold... keep it") - only the neutral/grey
     "text line" decoration rects are swapped, via attribute-selector
     overrides below, so they read as muted on dark instead of glowing. */
  --dc-mark-neutral-1: #66604f; /* was #D6D0C2 - understand/evaluate line */
  --dc-mark-neutral-2: #4f6575; /* was #C9D8EA - trace block fill */
  --dc-mark-neutral-3: #56748c; /* was #8FA9C6 - trace connector stroke */
  --dc-mark-neutral-4: #7c633b; /* was #E3CBA0 - shape block fill */
  --dc-mark-neutral-5: #91713f; /* was #C9AC79 - shape connector stroke */
  --dc-mark-neutral-6: #646a6b; /* was #C3CBD2 - portfolio block fill */
}

/* =============================================
   RESET & BASE STYLES
   ============================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
}

/* =============================================
   SCROLLBAR STYLES
   ============================================= */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

.hidden {
  display: none !important;
}

/* =============================================
   KEYBOARD HINTS
   ============================================= */

kbd {
  display: inline-block;
  padding: 1px 5px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-family: inherit;
  font-size: var(--font-size-xs);
}

/* =============================================
   ANIMATIONS
   ============================================= */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}