/* ==========================================================================
   Quillon Design System — CSS Custom Properties
   All design tokens live here. Never hardcode values in component CSS.
   ========================================================================== */

:root {
  /* ── Colors: Backgrounds ─ Navy editorial ────────────────────────────── */
  --bg-deep:          #0A1222;           /* Deepest background (body)        */
  --bg:               #0F1B33;           /* Section alternate background     */
  --bg-card:          #162747;           /* Card background (slightly light) */
  --card:             #162747;           /* Alias for bg-card (compat)       */
  --card-elevated:    rgba(255, 245, 230, 0.04); /* Elevated (warm tint)     */

  /* ── Colors: Accent ─ Monochrome cerulean (no warm secondary) ────────── */
  --accent:           #2E86AB;           /* Primary accent (CTA, links)      */
  --accent-light:     #4FA3C7;           /* Hover states                     */
  --accent-deep:      #1F5E7A;           /* Pressed / deep accent            */
  --accent-glow:      rgba(46, 134, 171, 0.28);   /* Background glow (rare) */
  --accent-subtle:    rgba(46, 134, 171, 0.12);   /* Focus rings, tints     */
  --accent-secondary: #1F5E7A;           /* Tonal deep (alias, compat)       */

  /* ── Colors: Text ─ Warm cream ──────────────────────────────────────── */
  --text-primary:     #F5EFE3;           /* Headings, primary copy (cream)   */
  --text-secondary:   #A8B0C0;           /* Descriptions, secondary copy     */
  --text-tertiary:    #6B7690;           /* Tertiary: stats labels, notes    */
  --text-muted:       #4A5468;           /* Disabled, placeholder            */
  --text-blue:        #2E86AB;           /* Inline accent text (primary)     */

  /* ── Colors: Borders ─────────────────────────────────────────────────── */
  --border:           rgba(245, 239, 227, 0.07);  /* Default card borders   */
  --border-blue:      rgba(46, 134, 171, 0.4);    /* Hover / active borders */
  --border-accent:    rgba(46, 134, 171, 0.4);    /* Semantic alias         */
  --border-light:     rgba(245, 239, 227, 0.14);  /* Stronger subtle border */

  /* ── Colors: Semantic ────────────────────────────────────────────────── */
  --success:          #10B981;
  --error:            #EF4444;
  --warning:          #F59E0B;
  /* --purple removed: banned per anti-AI guidelines. Use --accent or --accent-secondary. */

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display:     'Archivo', sans-serif;
  --font-body:        'DM Sans', sans-serif;
  --font-mono:        'JetBrains Mono', monospace;

  /* ── Spacing (8px grid) ──────────────────────────────────────────────── */
  --space-xs:         8px;
  --space-sm:         16px;
  --space-md:         24px;
  --space-lg:         32px;
  --space-xl:         48px;
  --space-2xl:        64px;
  --space-3xl:        96px;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-max:    1200px;
  --container-pad:    clamp(16px, 4vw, 48px);
  --section-pad:      clamp(64px, 10vw, 96px);
  --card-radius:      8px;     /* was 24px — anti-AI editorial tightening */
  --btn-radius:       6px;     /* was 12px */
  --radius-pill:      999px;   /* badges/tags keep pill shape for contrast */
  --radius-input:     4px;     /* form fields */

  /* ── Effects ─────────────────────────────────────────────────────────── */
  --glass-bg:         rgba(15, 27, 51, 0.6);
  --glass-blur:       blur(16px);
  --shadow-card:      0 1px 0 rgba(255, 255, 255, 0.04) inset,
                      0 8px 32px rgba(0, 0, 0, 0.5);
  --transition:       0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --spring:           cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Light Theme
   ========================================================================== */
[data-theme="light"] {
  --bg-deep: #FAF6ED;          /* warm cream, not pure white */
  --bg: #FFFDF7;
  --bg-card: #F3ECDB;          /* off-cream card */
  --glass-bg: rgba(255, 253, 247, 0.8);
  --text-primary: #1A1410;     /* warm near-black */
  --text-secondary: #4A3F35;
  --text-tertiary: #6B5E52;
  --text-muted: #9A8E80;
  --card: #F3ECDB;
  --card-elevated: rgba(26, 20, 16, 0.04);
  --border: rgba(26, 20, 16, 0.08);
  --border-light: rgba(26, 20, 16, 0.12);
  --border-blue: rgba(46, 134, 171, 0.3);
  --border-accent: rgba(46, 134, 171, 0.3);
  --shadow-card: 0 1px 3px rgba(26, 20, 16, 0.1), 0 1px 2px rgba(26, 20, 16, 0.06);
  /* Cerulean accent stays the same in light theme (#2E86AB) */
}