/* Official width breakpoints: 420px small mobile; 700px large mobile/narrow tablet; 900px tablet/small desktop; 1450px large desktop. */
:root {
  --font-display: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-sans: var(--font-body);

  --bg: #f2eee5;
  --bg-soft: #eae5da;
  --surface: #fffdf8;
  --surface-soft: #f8f4eb;
  --surface-strong: #101a1e;
  --ink: #102027;
  --ink-soft: #34474f;
  --muted: #718087;
  --muted-strong: #52656d;
  --line: #d9d8d0;
  --line-strong: #c6c8c0;

  --accent: #11877f;

  --accent-rgb: 17,135,127;
  --accent-strong: #0b625d;
  --accent-soft: #dff1ed;
  --gold: #e3ad45;
  --gold-strong: #c98d20;
  --gold-soft: #f8ebca;
  --coral: #e66d56;
  --danger: #b84d4d;
  --danger-soft: #fae9e7;
  --success: #2f7b58;
  --success-soft: #e5f3eb;
  /* Shared semantic colors extracted from repeated literals. */
  --ink-inverse: #f7faf9;
  --nav-muted: #9fb0b4;
  --nav-label: #60767c;
  --nav-active-ink: #10201f;
  --gamification-muted: #8fa0a4;
  --player-copy-muted: #aebbbd;
  --gold-ink: #6d4a0d;
  --player-deep: #0d1316;
  --track-soft: #e8e9e4;
  --line-soft: #ecece7;


  --player: #091317;
  --player-2: #122126;
  --player-3: #183139;
  --player-line: rgba(255,255,255,.11);
  --player-text: #f8fbfa;
  --player-muted: #9eb0b5;
  /* Canonical Player component geometry/progress palette (Immersion + Music). */
  --player-shell-radius: 9px;
  --player-frame-radius: 9px;
  --player-progress-start: #9a87dd;
  --player-progress-end: #f0cf7c;
  --player-progress-glow: rgba(190,169,242,.32);
  --player-progress-rest: rgba(108,93,146,.16);
  --music: #7564bd;
  --music-soft: #eeeafa;

  /* Study Hero — dark theme. Values intentionally mirror the approved hero palette. */
  --hero-bg-1: #021014;
  --hero-bg-2: #031b20;
  --hero-bg-3: #011013;
  --hero-ink: #f8faf9;
  --hero-ink-alt: #f7faf9;
  --hero-ink-soft: rgba(247,250,249,.88);
  --hero-eyebrow: rgba(215,229,227,.68);
  --hero-accent: #00b4a6;
  --hero-accent-2: #18c9ad;
  --hero-gold: #f1c95c;
  --hero-gold-2: #f0bd48;
  --hero-gold-3: #f3c65c;


  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 56px;
  --s10: 72px;

  --shadow-sm: 0 2px 10px rgba(16, 24, 28, .05);
  --shadow-md: 0 18px 46px rgba(16, 24, 28, .10);
  --shadow-lg: 0 34px 90px rgba(16, 24, 28, .16);

  --sidebar-w: 164px;
  --desktop-nav-h: 76px;
  --topbar-h: 66px;
  --content-max: 1540px;
  --ease: cubic-bezier(.22,.8,.28,1);

  /* Z-index scale — always use these variables, never a loose number. */
  --z-underlay: 0;
  --z-base: 1;
  --z-raised: 2;
  --z-sticky-decor: 3;
  --z-local-overlay: 4;
  --z-workspace-layer: 50;
  --z-player-controls: 60;
  --z-player-overlay: 70;
  --z-player-dock: 80;
  --z-sidebar: 80;
  --z-sticky-nav: 90;
  --z-topbar: 100;
  --z-account-menu: 110;
  --z-mobile-shortcuts: 120;
  --z-mobile-scrim: 121;
  --z-mobile-drawer: 122;
  --z-mobile-editor: 140;
  --z-dropdown: 160;
  --z-modal: 300;
  --z-toast: 400;

}