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

:root {

  /* ---- Backgrounds ---- */
  --bg:       #E9E6E3;
  --surface:  #F2F0EE;
  --surface2: #F8F6F4;
  --surface3: #FFFFFF;

  /* ---- Borders ---- */
  /* --border: canonical in foundation.css (#B9A99B) — removed to stop legacy override */
  --border2: #D2CEC4;

  /* ---- Brand (charcoal) ---- */
  --brand:      #2E2C2D;
  --brand-light: #4A4238;
  --brand-dim:  rgba(46, 44, 45, 0.08);

  /* ---- Accent (greige — canonical --sand, no hue) ---- */
  --accent:      #B4ADA6;
  --accent-dark: #A8897B;
  --accent-dim:  rgba(180, 173, 166, 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:  #2E2C2D;
  --text2: #5A534F;
  --text3: #6A645E;

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

  /* ---- Type Scale ---- */
  --text-xs:   12px;
  --text-sm:   14px;
  --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 / --shadow-lg: canonical in foundation.css — removed to stop legacy override */
  --shadow:       0 4px 12px rgba(48, 43, 38, 0.09);
  --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);

  /* ---- Sage (redesign 2026-05-28) ---- */
  /* --sage / --sage-accent / --sage-border: canonical in foundation.css — removed to stop legacy override */
  --sage-dark:   #2B3128;
  --sage-text:   #2E2C2D;
  --sage-text2:  #5E5A57;
  --sage-card:   rgba(255, 255, 255, 0.55);
  --app-green:   #A0B898;
}

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