/* ==========================================================================
   NARRAZEN DESIGN SYSTEM TOKENS
   Restrained, tactile, editorial aesthetic for sustained reading.
   ========================================================================== */

:root {
  /* Brand Primitives */
  --obsidian: #141413;
  --obsidian-hover: #262725;
  --parchment: #FAF9F6;
  --parchment-soft: #F3F1EA;
  --deep-slate: #18191B;
  --slate-surface: #212327;
  --terracotta: #C86D51;
  --terracotta-hover: #DE7C5F;
  --terracotta-subtle: rgba(200, 109, 81, 0.08);
  --honey: #F7E49A;
  --honey-dark: #3A3420;
  --honey-active: #F2DA7E;

  /* Typography Scales */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Light Theme Mappings (Default) */
  --bg: var(--parchment);
  --bg-subtle: #F2EFE8;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --text: #1A1A18;
  --text-muted: #706F6C;
  --border: #E8E6DF;
  --border-focus: #C86D51;
  --highlight-sentence: rgba(247, 228, 154, 0.35);
  --highlight-word: var(--honey);
  --player-bg: rgba(250, 249, 246, 0.94);
  --player-border: #E8E6DF;
  --player-text: #1A1A18;
  --shadow-subtle: 0 2px 8px rgba(20, 20, 19, 0.04);
  --shadow-card: 0 4px 20px -2px rgba(20, 20, 19, 0.06), 0 12px 32px -4px rgba(20, 20, 19, 0.08);
  --shadow-elevated: 0 8px 30px -4px rgba(20, 20, 19, 0.12), 0 20px 48px -8px rgba(20, 20, 19, 0.16);

  /* Layout & Geometry */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --container-max: 1080px;
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-med: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --bg: var(--deep-slate);
  --bg-subtle: #131415;
  --surface: #1E2023;
  --surface-raised: #24262A;
  --text: #F3F2EE;
  --text-muted: #9E9C96;
  --border: #2B2C30;
  --border-focus: #DE7C5F;
  --highlight-sentence: rgba(58, 52, 32, 0.6);
  --highlight-word: var(--honey-dark);
  --player-bg: rgba(24, 25, 27, 0.94);
  --player-border: #2B2C30;
  --player-text: #F3F2EE;
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 4px 24px -2px rgba(0, 0, 0, 0.4), 0 16px 40px -4px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 8px 32px -4px rgba(0, 0, 0, 0.5), 0 24px 56px -8px rgba(0, 0, 0, 0.6);
}