/* =============================================================================
   Eternal Presence — Design Tokens
   Source of truth: stitch_24_hours_design_studio/eternal_thread/DESIGN.md
   ============================================================================= */

:root {

  /* ── Surfaces ── */
  --surface:                    #faf9f6;
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      #f4f3f0;
  --surface-container:          #efeeeb;
  --surface-container-high:     #e9e8e5;
  --surface-container-highest:  #e3e2df;

  /* ── Primary ── */
  --primary:                    #000000;
  --primary-container:          #1c1b1b;
  --on-primary:                 #ffffff;

  /* ── On-surface ── */
  --on-surface:                 #1a1c1a;
  --on-surface-variant:         #44483d;

  /* ── Secondary (earthy brown) ── */
  --secondary:                  #6a5c4c;
  --secondary-container:        #f0e8df;
  --on-secondary-container:     #231a0f;

  /* ── Tertiary (muted gold) ── */
  --tertiary:                   #8a7250;
  --tertiary-container:         #fdeecf;

  /* ── Outline ── */
  --outline:                    #74796c;
  --outline-variant:            #c4c8bb;

  /* ── Typography ── */
  --font-display:               'Epilogue', sans-serif;
  --font-editorial:             'Newsreader', serif;
  --font-ui:                    'Manrope', sans-serif;

  /* ── Type scale ── */
  --text-display-lg:   3.5rem;    /* 56px — hero headlines */
  --text-display-md:   2.75rem;   /* 44px */
  --text-display-sm:   2.25rem;   /* 36px */
  --text-headline-lg:  2rem;      /* 32px */
  --text-headline-md:  1.75rem;   /* 28px */
  --text-headline-sm:  1.5rem;    /* 24px */
  --text-title-lg:     1.25rem;   /* 20px */
  --text-title-md:     1rem;      /* 16px */
  --text-title-sm:     0.875rem;  /* 14px */
  --text-body-lg:      1rem;
  --text-body-md:      0.9375rem; /* 15px */
  --text-body-sm:      0.875rem;
  --text-micro:        0.75rem;   /* 12px — labels, pricing, nav */

  /* ── Spacing (16px base grid) ── */
  --space-2:    0.125rem;  /* 2px  */
  --space-4:    0.25rem;   /* 4px  */
  --space-8:    0.5rem;    /* 8px  */
  --space-12:   0.75rem;   /* 12px */
  --space-16:   1rem;      /* 16px */
  --space-24:   1.5rem;    /* 24px */
  --space-32:   2rem;      /* 32px */
  --space-48:   3rem;      /* 48px */
  --space-64:   4rem;      /* 64px */
  --space-96:   6rem;      /* 96px */
  --space-128:  8rem;      /* 128px */

  /* ── Radii ── */
  --radius-sm:   0.25rem;  /* buttons */
  --radius-md:   0.5rem;
  --radius-xl:   0.75rem;  /* cards */
  --radius-full: 9999px;   /* pills */

  /* ── Shadows (ambient only — never hard drop shadows) ── */
  --shadow-float: 0 0 40px rgba(26, 28, 26, 0.04);
  --shadow-card:  0 2px 24px rgba(26, 28, 26, 0.06);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ── */
  --content-max:   1280px;
  --content-wide:  1440px;
  --gutter:        var(--space-32);
}

@media (max-width: 768px) {
  :root {
    --text-display-lg: 2.5rem;
    --text-display-md: 2rem;
    --text-headline-lg: 1.75rem;
    --gutter: var(--space-16);
  }
}