/* ----------------------------------------------------------------
   STILLPOINT — Design Tokens
   Warm, grounded, spiritual. Parchment + ember + sage.
---------------------------------------------------------------- */

:root {
  /* Type scale (fluid) */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:    clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl:    clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:   clamp(2rem, 1.3rem + 2.5vw, 3.25rem);
  --text-3xl:   clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
  --text-hero:  clamp(2.5rem, 1rem + 5.5vw, 5.25rem);

  /* Spacing — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 9999px;

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1180px;

  /* Motion */
  --ease-quiet: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-interactive: 220ms var(--ease-quiet);

  /* Fonts */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
}

/* ---------------- LIGHT (warm parchment) ---------------- */
:root,
[data-theme='light'] {
  /* Surfaces — warm linen / parchment */
  --color-bg:            #f6efe3;   /* warm linen */
  --color-surface:       #fbf6ec;   /* candle paper */
  --color-surface-2:     #f1e7d4;
  --color-surface-offset:#ead9bf;
  --color-divider:       #dfcdaf;
  --color-border:        #d2bd9b;

  /* Text — warm umber, not pure black */
  --color-text:          #2a2118;
  --color-text-muted:    #6b5d4a;
  --color-text-faint:    #a5947b;
  --color-text-inverse:  #fbf6ec;

  /* Primary accent — ember / clay */
  --color-primary:        #b34a25;   /* burnt sienna */
  --color-primary-hover:  #94381b;
  --color-primary-active: #6e2912;
  --color-primary-soft:   #e9c9b3;

  /* Secondary — sage (grounding green) */
  --color-secondary:      #5a6b4d;
  --color-secondary-soft: #cdd4bd;

  /* Highlight — gilded gold (used sparingly) */
  --color-gold:           #b88a2c;
  --color-gold-soft:      #e7d4a4;

  /* Semantic */
  --color-success: #4f7a3a;
  --color-error:   #9a3a2a;

  /* Shadows — warm */
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06);
  --shadow-md: 0 6px 18px rgba(60, 40, 20, 0.10);
  --shadow-lg: 0 22px 50px rgba(60, 40, 20, 0.18);

  /* Page-edge gradient (used as decoration) */
  --grad-dawn: radial-gradient(ellipse at 50% 0%, #f5d6b1 0%, transparent 60%);
}

/* ---------------- DARK (lantern light) ---------------- */
[data-theme='dark'] {
  --color-bg:            #161210;
  --color-surface:       #1d1814;
  --color-surface-2:     #221b16;
  --color-surface-offset:#2a221b;
  --color-divider:       #2f2620;
  --color-border:        #3d3128;

  --color-text:          #ece2d1;
  --color-text-muted:    #a89882;
  --color-text-faint:    #6b5d4a;
  --color-text-inverse:  #161210;

  --color-primary:        #d97a4d;
  --color-primary-hover:  #e89065;
  --color-primary-active: #f0a786;
  --color-primary-soft:   #43271c;

  --color-secondary:      #9bae89;
  --color-secondary-soft: #2a3325;

  --color-gold:           #e0b766;
  --color-gold-soft:      #3a2e16;

  --color-success: #8fb073;
  --color-error:   #d27966;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.6);

  --grad-dawn: radial-gradient(ellipse at 50% 0%, #3a2418 0%, transparent 60%);
}

/* System preference fallback (when no manual override is set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:            #161210;
    --color-surface:       #1d1814;
    --color-surface-2:     #221b16;
    --color-surface-offset:#2a221b;
    --color-divider:       #2f2620;
    --color-border:        #3d3128;
    --color-text:          #ece2d1;
    --color-text-muted:    #a89882;
    --color-text-faint:    #6b5d4a;
    --color-text-inverse:  #161210;
    --color-primary:       #d97a4d;
    --color-primary-hover: #e89065;
    --color-primary-active:#f0a786;
    --color-primary-soft:  #43271c;
    --color-secondary:     #9bae89;
    --color-secondary-soft:#2a3325;
    --color-gold:          #e0b766;
    --color-gold-soft:     #3a2e16;
    --color-success:       #8fb073;
    --color-error:         #d27966;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.6);
    --grad-dawn: radial-gradient(ellipse at 50% 0%, #3a2418 0%, transparent 60%);
  }
}