/* ==========================================================================
   VALEDRIA — Design tokens
   Single source of truth for colour, type, spacing and motion.
   Do not use raw hex values or magic numbers in component CSS —
   reference these custom properties only.
   ========================================================================== */

:root{

  /* ---------- Palette (Section 8.4) ---------- */
  --ivory:      #FAF6F0;
  --charcoal:   #1C1C1C;
  --champagne:  #C9A96E;
  --blush:      #E8D5CC;

  /* Additional permitted neutrals */
  --stone:      #EDE7DD;
  --taupe:      #B9AC9A;
  --beige:      #F1EAE0;

  /* ---------- Semantic tokens ---------- */
  --bg-page:        var(--ivory);
  --bg-raised:      #FFFFFF;
  --bg-sunken:      var(--stone);
  --bg-inverse:     var(--charcoal);

  --text-primary:   var(--charcoal);
  --text-secondary: #56524B; /* warm grey, ~7.6:1 on ivory — passes AA for body text */
  --text-inverse:   var(--ivory);
  --text-muted-inverse: #C9C4BA; /* for secondary text on charcoal grounds */

  --border-subtle:  rgba(28,28,28,0.10);
  --border-strong:  rgba(28,28,28,0.28);
  --border-inverse:  rgba(250,246,240,0.22);

  --accent:         var(--champagne);   /* decorative only — see 8.5 */
  --accent-soft:    var(--blush);       /* decorative only — see 8.5 */

  --focus-ring:     var(--charcoal);
  --focus-ring-inverse: var(--ivory);

  --state-success:  #3F6B4A;
  --state-error:    #9A3B2E;
  --state-warning:  #8A6A2E;

  /* ---------- Typography ---------- */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --lh-display: 1.15;
  --lh-heading: 1.22;
  --lh-body: 1.65;
  --lh-tight: 1.3;

  /* Type scale — mobile defaults; overridden at tablet/desktop breakpoints below */
  --fs-display-xl: 3rem;      /* 48 */
  --fs-display-l:  2.5rem;    /* 40 */
  --fs-h1:         2rem;      /* 32 */
  --fs-h2:         1.625rem;  /* 26 */
  --fs-h3:         1.375rem;  /* 22 */
  --fs-h4:         1.125rem;  /* 18 */
  --fs-body-l:     1.0625rem; /* 17 */
  --fs-body:       1rem;      /* 16 */
  --fs-body-s:     0.875rem;  /* 14 */
  --fs-caption:    0.8125rem; /* 13 */
  --fs-eyebrow:    0.75rem;   /* 12 */

  /* ---------- Spacing scale (closed set, Section 8.8) ---------- */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-96:  6rem;
  --space-128: 8rem;
  --space-160: 10rem;

  /* Section rhythm */
  --section-pad-mobile: var(--space-64);
  --section-pad-desktop: var(--space-96);

  /* ---------- Layout ---------- */
  --content-max: 1440px;
  --editorial-max: 720px; /* 60-75ch measure for long-form copy */
  --gutter-mobile: 24px;
  --gutter-tablet: 32px;
  --gutter-desktop: 40px;

  --header-h-desktop: 72px;
  --header-h-mobile: 56px;
  --announcement-h: 40px;

  /* ---------- Radius (deliberately restrained — no card-shaped luxury) ---------- */
  --radius-s: 2px;
  --radius-m: 3px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-interface: 260ms;
  --dur-interface-fast: 200ms;
  --dur-editorial: 720ms;

  /* ---------- Elevation (minimal, matte) ---------- */
  --shadow-raised: 0 1px 2px rgba(28,28,28,0.06), 0 8px 24px rgba(28,28,28,0.06);
  --shadow-overlay: 0 12px 48px rgba(28,28,28,0.18);

  --z-header: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* Tablet (>=768px) */
@media (min-width: 768px){
  :root{
    --fs-display-xl: 4rem;      /* 64 */
    --fs-display-l:  3rem;      /* 48 */
    --fs-h1:         2.375rem;  /* 38 */
    --fs-h2:         1.875rem;  /* 30 */
    --fs-h3:         1.5rem;    /* 24 */
    --fs-h4:         1.125rem;  /* 18 */
    --fs-body-l:     1.125rem;  /* 18 */
  }
}

/* Desktop (>=1024px) */
@media (min-width: 1024px){
  :root{
    --fs-display-xl: 4.5rem;    /* 72 */
    --fs-display-l:  3.5rem;    /* 56 */
    --fs-h1:         2.75rem;   /* 44 */
    --fs-h2:         2.125rem;  /* 34 */
    --fs-h3:         1.625rem;  /* 26 */
    --fs-h4:         1.25rem;   /* 20 */
  }
}

/* Reduced motion: collapse editorial durations, keep state changes instant/opacity-only */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-interface: 1ms;
    --dur-interface-fast: 1ms;
    --dur-editorial: 1ms;
  }
}