/* ═══════════════════════════════════════════
   TOKENS — Design System Custom Properties
   Alpine editorial palette refresh (v1.4.8+ aggressive aesthetics pass)
   ═══════════════════════════════════════════ */

/* Breakpoint reference tokens (Decision 7 — mobile-first 5 tiers)
   Usage: these are documentation tokens; actual @media queries live in responsive.css
   --bp-sm:  480px
   --bp-md:  768px
   --bp-lg:  1024px
   --bp-xl:  1280px
*/

:root {
  /* ── Color palette: deep alpine atmosphere ── */
  --bg:        #080c12;
  --surface:   #101b2a;
  --surface2:  #182b40;
  --surface3:  #1e3348;
  --border:    #2e4560;
  --border-glow: #6ea0c81a;
  --stone:     #b9ac9e;
  --ochre:     #d4a874;
  --ochre-dim: #8e6d4a;
  --ice:       #b0d0e6;
  --ice-dim:   #6890aa;
  --ice-bright: #d8edfa;
  --white:     #eaf1f8;
  --red:       #c96f63;
  --red-dim:   #8d473f;
  --safety:    #7fb89a;
  --text:      #dae4ee;
  --text-dim:  #8da2b6;
  --text-soft: #a8baca;
  --muted:     #8da2b6;
  --accent:    #d4a874;
  --accent-rose: #c9a0b8;
  --accent-aurora: #7fc4b8;

  /* ── Typography ── */
  --brand:   'Playfair Display', 'Lora', Georgia, serif;
  --heading: var(--brand);
  --mono:    'IBM Plex Mono', monospace;
  --serif:   var(--brand);
  --sans:    'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif;
  --body:    var(--sans);
  --ui:      var(--sans);

  /* ── Spacing scale ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* ── Border radius ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* ── Transition speeds ── */
  --dur-fast:   0.15s;
  --dur-normal: 0.25s;
  --dur-slow:   0.4s;

  /* ── Animation easing ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* ── Enhanced shadows ── */
  --shadow-soft: 0 8px 32px #05080d44;
  --shadow-medium: 0 16px 48px #05080d66;
  --shadow-glow-ice: 0 0 30px #a0c8e012, 0 0 60px #a0c8e008;
  --shadow-glow-amber: 0 0 30px #d4a87412, 0 0 60px #d4a87408;
  --shadow-inset: inset 0 1px 0 #ffffff06;
}