/* styles/tokens.css — Design tokens. Single source of truth for colour, type
   scale and spacing.

   Palette (Directive §2): warm ivory and soft cream surfaces, charcoal text,
   metallic warm gold and deep royal plum as the accents. Darkness is kept as a
   deliberate accent — header, footer, the entrance and selected feature bands —
   rather than the default state of the page. Those areas opt in through the
   .band-dark scope at the bottom of this file, which re-points the same tokens
   at the original warm-black values so no component needs a second ruleset.

   Every text-on-surface pairing below clears WCAG AA at body size. */

:root {
      /* ── warm light surfaces ── */
      --color-bg:        #F6F1E7;   /* warm ivory */
      --color-surface:   #FCF9F2;   /* soft cream — cards, panels */
      --color-surface-2: #F0E8D8;   /* champagne */
      --color-surface-3: #E9E0CE;
      --color-border:    #DFD3BC;
      --color-divider:   #E7DCC8;

      /* ── charcoal text ── */
      --color-text:         #22201C;
      --color-text-muted:   #5E574C;
      --color-text-faint:   #8A8175;
      --color-text-inverse: #FCF9F2;

      /* ── accents ── */
      --color-gold:       #8F6519;   /* metallic warm gold, AA on ivory */
      --color-gold-light: #7E5714;   /* emphasis — deeper, not lighter, on light */
      --color-gold-dim:   #DCC8A0;   /* hairlines and outlines */
      --color-gold-glow:  rgba(143,101,25,0.10);
      --color-gold-fill:  #C9A548;   /* decorative fills only, never text */

      --color-plum:       #4A2352;   /* deep royal plum — primary filled CTA */
      --color-plum-deep:  #35163C;
      --color-ink:        #1A1714;   /* warm black for dark bands */
      --color-ink-2:      #221E1A;

      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body:    'Jost', 'Helvetica Neue', sans-serif;

      --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.75vw, 1.5rem);
      --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
      --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);
      --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);

      --space-1:  0.25rem;
      --space-2:  0.5rem;
      --space-3:  0.75rem;
      --space-4:  1rem;
      --space-5:  1.25rem;
      --space-6:  1.5rem;
      --space-7:  1.75rem;
      --space-8:  2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --space-24: 6rem;
      --space-32: 8rem;

      --content-narrow:  640px;
      --content-default: 960px;
      --content-wide:    1200px;

      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 1rem;

      --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

      /* Warm, low-contrast elevation. Black shadows read as dirt on ivory. */
      --shadow-sm:   0 1px 2px rgba(58,44,20,0.06);
      --shadow-md:   0 8px 24px rgba(58,44,20,0.08);
      --shadow-lg:   0 20px 50px rgba(58,44,20,0.12);
      --shadow-gold: 0 12px 36px rgba(143,101,25,0.16);
    }

/* Dark bands. Any element carrying .band-dark — and the header, footer and
   entrance overlay, which are dark by default — inherits the original warm
   black scheme through the very same variable names. */
.band-dark,
#page-loader,
.site-header,
.mobile-nav,
.site-footer {
      --color-bg:        #1A1714;
      --color-surface:   #221E1A;
      --color-surface-2: #2A2520;
      --color-surface-3: #302B25;
      --color-border:    #403B34;
      --color-divider:   #2E2A24;

      --color-text:         #F2EDE3;
      --color-text-muted:   #BBB2A2;
      --color-text-faint:   #8A8175;
      --color-text-inverse: #1A1714;

      --color-gold:       #D4AE52;
      --color-gold-light: #EAD48A;
      --color-gold-dim:   #7A6228;
      --color-gold-glow:  rgba(212,174,82,0.14);

      --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
      --shadow-md:   0 12px 32px rgba(0,0,0,0.45);
      --shadow-lg:   0 28px 70px rgba(0,0,0,0.55);
      --shadow-gold: 0 0 40px rgba(212,174,82,0.18);
    }