/* ═══════════════════════════════════════════════════
   THE UNION BLUEPRINT — Design Tokens
   Brand: Dusty rose + Steel blue + Warm gold + Dark plum
═══════════════════════════════════════════════════ */

:root {
  /* ── Brand Palette ── */
  --rose:           #B05070;
  --rose-light:     #D4849E;
  --rose-pale:      #F5E8ED;
  --rose-deep:      #8C3A56;
  --blue:           #4A6B8A;
  --blue-light:     #7DA0BF;
  --blue-pale:      #E8EFF5;
  --blue-deep:      #2F4D6A;
  --gold:           #C4974A;
  --gold-light:     #E0BC80;
  --gold-pale:      #FAF2E6;
  --plum:           #2C1A26;
  --plum-mid:       #5C3D52;
  --plum-light:     #8C6A7E;
  --ivory:          #FBF7F5;
  --ivory-dark:     #F2EAE6;

  /* ── Semantic Color Roles ── */
  --color-bg:            var(--ivory);
  --color-surface:       #FFFFFF;
  --color-surface-2:     var(--ivory-dark);
  --color-border:        #E8DDE3;
  --color-border-strong: #D4C5CC;
  --color-text:          var(--plum);
  --color-text-muted:    var(--plum-mid);
  --color-text-faint:    var(--plum-light);
  --color-primary:       var(--rose);
  --color-primary-hover: var(--rose-deep);
  --color-accent:        var(--gold);
  --color-accent-hover:  #A87C30;

  /* ── Type Scale ── */
  --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,     1rem    + 6vw,    6.5rem);

  /* ── Fonts ── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Work Sans', 'Helvetica Neue', sans-serif;

  /* ── Spacing ── */
  --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;

  /* ── Radius ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(44,26,38,0.08);
  --shadow-md: 0 4px 16px rgba(44,26,38,0.10);
  --shadow-lg: 0 12px 40px rgba(44,26,38,0.14);

  /* ── Transitions ── */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 200ms var(--ease);

  /* ── Layout ── */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --color-bg:            #1A1018;
  --color-surface:       #221520;
  --color-surface-2:     #2A1C28;
  --color-border:        #3D2838;
  --color-border-strong: #5C3D52;
  --color-text:          #F0E8EC;
  --color-text-muted:    #C0A0B0;
  --color-text-faint:    #8C6A7E;
  --color-primary:       #D4849E;
  --color-primary-hover: #E8A0B8;
  --color-accent:        #E0BC80;
  --color-accent-hover:  #F0D090;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:            #1A1018;
    --color-surface:       #221520;
    --color-surface-2:     #2A1C28;
    --color-border:        #3D2838;
    --color-border-strong: #5C3D52;
    --color-text:          #F0E8EC;
    --color-text-muted:    #C0A0B0;
    --color-text-faint:    #8C6A7E;
    --color-primary:       #D4849E;
    --color-primary-hover: #E8A0B8;
    --color-accent:        #E0BC80;
    --color-accent-hover:  #F0D090;
  }
}