/* =============================================================
   Design Tokens — RITUAL by Rest & Retreat
   All values live here. No hardcoded values anywhere else.
   ============================================================= */

:root {

  /* ---- Backgrounds ---- */
  --bg:       #EDEBE3;
  --surface:  #F4F2EB;
  --surface2: #F9F8F4;
  --surface3: #FFFFFF;

  /* ---- Borders ---- */
  --border:  #E0DDD5;
  --border2: #D2CEC4;

  /* ---- Brand (charcoal) ---- */
  --brand:      #302B26;
  --brand-light: #4A4238;
  --brand-dim:  rgba(48, 43, 38, 0.08);

  /* ---- Accent (warm taupe) ---- */
  --accent:      #C4A898;
  --accent-dark: #A8897B;
  --accent-dim:  rgba(196, 168, 152, 0.15);

  /* ---- Semantic ---- */
  --red:       #A85252;
  --red-dim:   rgba(168, 82, 82, 0.1);
  --green:     #5C8A5C;
  --green-dim: rgba(92, 138, 92, 0.1);
  --amber:     #B87840;
  --amber-dim: rgba(184, 120, 64, 0.1);

  /* ---- Text ---- */
  --text:  #302B26;
  --text2: #6B6058;
  --text3: #9E948A;

  /* ---- Font Families ---- */
  --font-display: 'Marcellus', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-label:   'Marcellus SC', Georgia, serif;
  --font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  /* ---- Type Scale ---- */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;

  /* ---- Line Heights ---- */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ---- Letter Spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ---- Spacing ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Border Radius ---- */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:    0 1px 3px rgba(48, 43, 38, 0.07);
  --shadow:       0 4px 12px rgba(48, 43, 38, 0.09);
  --shadow-lg:    0 12px 40px rgba(48, 43, 38, 0.12);
  --shadow-brand: 0 0 24px rgba(48, 43, 38, 0.15);

  /* ---- Transitions ---- */
  --transition-fast: 150ms cubic-bezier(0, 0, 0.2, 1);
  --transition:      250ms cubic-bezier(0, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0, 0, 0.2, 1);

  /* ---- Z-index Scale ---- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: var(--space-6);
  --section-gap:   var(--space-24);
}

/* ---- Dark mode overrides ---- */
/* Applied on library, player, dashboard pages only via JS toggle */
[data-theme="dark"] {
  --bg:       #1C1916;
  --surface:  #252019;
  --surface2: #2E2822;
  --surface3: #38312A;
  --border:   #3F3830;
  --border2:  #4A4238;
  --text:     #EDEBE3;
  --text2:    #B0A898;
  --text3:    #706860;
  --brand:       #EDEBE3;
  --brand-light: #FFFFFF;
  --brand-dim:   rgba(237, 235, 227, 0.08);
  --accent:      #C4A898;
  --accent-dark: #D4B8A8;
  --accent-dim:  rgba(196, 168, 152, 0.15);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow:       0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-brand: 0 0 24px rgba(196, 168, 152, 0.2);
}

@media (max-width: 640px) {
  :root {
    --text-3xl: 28px;
    --text-4xl: 36px;
    --container-pad: var(--space-4);
    --section-gap: var(--space-16);
  }
}