/**
 * 2026 Brown Family Reunion — CSS Design Tokens
 * Source: Erica's 2026 flyer artwork
 * Updated: 2026-03-21
 *
 * TWO-TIER PALETTE:
 *
 *  BOLD   — Erica's original colors. Accents, headings, borders, CTAs.
 *           High chroma, warm. Use sparingly — they earn their keep.
 *
 *  SOFT   — Pastel derivatives. Backgrounds, glass surfaces, tints.
 *           Same hue families, pushed to ~92–97% lightness.
 *           These are what make the design breathe.
 *
 * Seed colors (extracted from flyer):
 *   Burgundy    #783C50  — dominant; headings, links, key accents
 *   Olive gold  #8C7828  — secondary; labels, dividers, tags
 *   Terracotta  #B4503C  — CTA; primary action color
 *   Deep brown  #3C2814  — body text
 *   Dark olive  #64643C  — muted text, supporting labels
 */

:root {

  /* ============================================================
     BOLD — Erica's palette (accent / text / CTA layer)
  ============================================================ */

  --bold-burgundy:      #783C50;
  --bold-burgundy-dk:   #4A2030;
  --bold-olive:         #8C7828;
  --bold-olive-dk:      #574A14;
  --bold-terracotta:    #B4503C;
  --bold-terracotta-dk: #782E1E;
  --bold-brown:         #3C2814;
  --bold-olive-muted:   #64643C;


  /* ============================================================
     SOFT — Pastel derivatives (surface / background layer)
     Same hue families as above; saturation reduced ~60%,
     lightness raised to ~92–97%.
  ============================================================ */

  /* Rose — from burgundy (hue ~340°) */
  --soft-rose-subtle:  #FDF5F7;   /* 97% L — page tints, hero gradient  */
  --soft-rose-light:   #F7E8ED;   /* 94% L — glass card tint            */
  --soft-rose-mid:     #EDCCD5;   /* 88% L — tags, subtle borders       */

  /* Honey — from olive gold (hue ~47°) */
  --soft-honey-subtle: #FDFAF0;   /* 97% L — page tints                 */
  --soft-honey-light:  #F5EDCF;   /* 92% L — glass card tint            */
  --soft-honey-mid:    #E8D9A8;   /* 86% L — dividers, tags             */

  /* Peach — from terracotta (hue ~12°) */
  --soft-peach-subtle: #FDF8F5;   /* 97% L — page tints                 */
  --soft-peach-light:  #F9EAE3;   /* 93% L — form backgrounds           */
  --soft-peach-mid:    #F0CFC3;   /* 87% L — hover states, borders      */

  /* Linen — warm neutral (the true page background) */
  --linen-0:  #FDFAF5;   /* page background                            */
  --linen-1:  #F8F2E8;   /* subtle section alt                         */
  --linen-2:  #F0E8DA;   /* deeper alternate, footer                   */
  --linen-3:  #E6D8C4;   /* borders, dividers                          */


  /* ============================================================
     SEMANTIC — Use these in all component CSS.
     Never reference --bold-* or --soft-* directly in components.
  ============================================================ */

  /* Text */
  --reunion-text-body:    var(--bold-brown);
  --reunion-text-heading: var(--bold-brown);
  --reunion-text-muted:   #8A7C6E;        /* warm mid-tone, not cold gray */
  --reunion-text-on-dark: var(--linen-0);

  /* Page backgrounds */
  --reunion-bg-page:        var(--linen-0);
  --reunion-bg-card:        var(--linen-1);
  --reunion-bg-section-alt: var(--linen-2);

  /* Glass surface tints — use as rgba backgrounds over the soft palette */
  --reunion-surface-rose:   var(--soft-rose-light);
  --reunion-surface-honey:  var(--soft-honey-light);
  --reunion-surface-peach:  var(--soft-peach-light);

  /* Bold accents — headings, links, decorative rules */
  --reunion-burgundy-base:  var(--bold-burgundy);
  --reunion-burgundy-dark:  var(--bold-burgundy-dk);
  --reunion-burgundy-mid:   #C2899A;
  --reunion-burgundy-light: var(--soft-rose-light);

  --reunion-olive-base:     var(--bold-olive);
  --reunion-olive-mid:      #BFB070;
  --reunion-olive-light:    var(--soft-honey-light);
  --reunion-olive-dark-base:  var(--bold-olive-muted);
  --reunion-olive-dark-light: var(--soft-honey-mid);

  --reunion-terracotta-base:  var(--bold-terracotta);
  --reunion-terracotta-dark:  var(--bold-terracotta-dk);
  --reunion-terracotta-light: var(--soft-peach-light);
  --reunion-terracotta-mid:   #D89080;

  /* Borders */
  --reunion-border-subtle: var(--linen-3);
  --reunion-border-mid:    var(--soft-rose-mid);

  /* Buttons */
  --reunion-btn-primary-bg:       var(--bold-terracotta);
  --reunion-btn-primary-text:     #fff;
  --reunion-btn-primary-hover-bg: var(--bold-terracotta-dk);

  /* Focus ring */
  --reunion-focus-ring: var(--bold-terracotta);

  /* Aliases used in components */
  --reunion-brown-base: var(--bold-brown);
  --reunion-cream-base: var(--linen-0);
}