/* ============================================================
   EMBER v2 — Design Tokens
   Evolved from Anand's "Ember" warm-dashboard system.
   Additions over v1: editorial type stack (Fraunces / Manrope /
   JetBrains Mono), grain + glow atmosphere vars, refined gradient
   set, and portfolio-scale type ramp.
   ============================================================ */

:root {
  /* --- warm neutral ramp (surfaces & ink) --- */
  --ink-950: #120D0A;
  --ink-900: #1B140F;
  --ink-850: #221913;
  --ink-800: #2A1F17;
  --ink-700: #352619;
  --ink-600: #4A3728;
  --ink-500: #6B5443;

  /* --- maroon surfaces (coral variant) --- */
  --maroon-900: #2A1215;
  --maroon-800: #3A181C;
  --maroon-700: #4E2429;
  --maroon-600: #5F2E33;

  /* --- text --- */
  --text-primary: #FBF4EC;
  --text-secondary: #C4B4A6;
  --text-muted: #8A7A6C;
  --text-inverse: #1B140F;

  /* --- accent: amber (default) --- */
  --amber-300: #FAC784;
  --amber-400: #F7B25C;
  --amber-500: #F2933B;
  --amber-600: #E4732A;
  --grad-ember: linear-gradient(135deg, #FAC784 0%, #F2933B 45%, #E4632B 100%);

  /* --- accent: coral --- */
  --coral-300: #F39A90;
  --coral-400: #EE7A6F;
  --coral-500: #E4574F;
  --coral-600: #D23F3C;
  --grad-coral: linear-gradient(135deg, #F39A90 0%, #E4574F 45%, #D23F3C 100%);

  /* --- support & semantic --- */
  --cream: #F3E4C4;
  --success: #4FD08A;
  --success-soft: #1F3A2E;
  --danger: #F16A5A;
  --danger-soft: #3A1F1C;

  /* --- radius --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* --- shadow (warm-tinted) --- */
  --shadow-sm: 0 2px 8px rgba(18, 10, 6, .35);
  --shadow-md: 0 8px 24px rgba(18, 10, 6, .45);
  --shadow-lg: 0 18px 48px rgba(18, 10, 6, .55);
  --shadow-xl: 0 40px 90px rgba(10, 6, 3, .65);
  --glow-amber: 0 10px 40px rgba(228, 115, 42, .40);
  --glow-coral: 0 10px 40px rgba(210, 63, 60, .40);

  /* --- typography --- */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* --- motion --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* --- layout --- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ---- accent theming: swap surfaces + accent as one unit ---- */
:root,
.theme-amber {
  --canvas: var(--ink-950);
  --bg: var(--ink-900);
  --rail: var(--ink-850);
  --surface-1: var(--ink-800);
  --surface-2: var(--ink-700);
  --line: var(--ink-600);
  --accent: var(--amber-500);
  --accent-strong: var(--amber-600);
  --accent-soft: var(--amber-400);
  --accent-bright: var(--amber-300);
  --grad-accent: var(--grad-ember);
  --glow: var(--glow-amber);
  --accent-rgb: 242, 147, 59;
}

.theme-coral {
  --canvas: var(--maroon-900);
  --bg: var(--maroon-800);
  --rail: var(--maroon-800);
  --surface-1: var(--maroon-700);
  --surface-2: var(--maroon-600);
  --line: var(--maroon-600);
  --accent: var(--coral-500);
  --accent-strong: var(--coral-600);
  --accent-soft: var(--coral-400);
  --accent-bright: var(--coral-300);
  --grad-accent: var(--grad-coral);
  --glow: var(--glow-coral);
  --accent-rgb: 228, 87, 79;
}