/* ============================================================
   Melrose Families. Shared Design Tokens
   Single source of truth for color, type, spacing, and shape.
   Pages link this file, then layer their own component CSS on top.

   Direction: deep hunter green + old gold + parchment/cream + ink.
   Type: Playfair Display (display) + Source Serif 4 (body).

   Style rule: no em dashes or en dashes anywhere in copy.
   See web/DESIGN-SYSTEM.md for the full guide.
   ============================================================ */

:root {
  /* ---- BRAND COLOR ---- */
  --green-deep:   #1a3a2a;  /* hunter green: headings, dark sections, deep UI */
  --green-mid:    #2d5a3d;  /* mid green: links, accents on light backgrounds */
  --green-light:  #3d7a52;  /* light green: gradients, highlights */
  --green-subtle: #c8d9cd;  /* pale green: badge fills, soft underlines */

  --gold:         #c9a44a;  /* old gold: primary accent, eyebrows, borders */
  --gold-light:   #e8c97a;  /* light gold: text on dark green */
  --gold-pale:    #f5e8c5;  /* pale gold: notice panels on light backgrounds */

  --cream:        #f7f3ea;  /* page background, light cards */
  --parchment:    #ede5d0;  /* alternating section background */

  --ink:          #1c1a14;  /* body text, footer background */
  --ink-mid:      #3a3628;  /* secondary body text */
  --ink-light:    #6b6350;  /* captions, muted notes */
  --white:        #ffffff;  /* tile and card fills */

  /* ---- TYPE ---- */
  --ff-display:  'Playfair Display', Georgia, serif;
  --ff-body:     'Source Serif 4', Georgia, serif;

  --fs-xs:   0.75rem;   /* captions, count badges, labels */
  --fs-sm:   0.875rem;  /* small UI, nav links */
  --fs-base: 1rem;      /* compact body */
  --fs-md:   1.125rem;  /* standard body */
  --fs-lg:   1.25rem;   /* lead body, large links */
  --fs-xl:   1.5rem;    /* card titles, pull quotes */
  --fs-2xl:  2rem;      /* sub-headings */
  --fs-3xl:  2.75rem;   /* section titles */
  --fs-4xl:  3.75rem;   /* hero */
  --fs-5xl:  5rem;      /* hero max */

  --lh-tight: 1.2;   /* display headings */
  --lh-snug:  1.4;   /* card titles */
  --lh-body:  1.7;   /* running prose */

  /* ---- SPACING SCALE (rem, 16px base) ---- */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Standard internal padding for tiles, cards, and badges.
     --pad-card is the comfortable breathing room used by the
     "The Families" surname tiles and the chart node cards. */
  --pad-card:  var(--space-6) var(--space-6);  /* 24px all around */
  --pad-tile:  var(--space-6) var(--space-6);  /* alias for surname tiles */
  --pad-badge: var(--space-1) var(--space-3);  /* count badge inset */

  /* ---- LAYOUT ---- */
  --max-w:     1140px;
  --max-prose: 720px;

  /* ---- SHAPE ---- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(28,26,20,0.12);
  --shadow-md: 0 4px 16px rgba(28,26,20,0.14);
  --shadow-lg: 0 12px 40px rgba(28,26,20,0.18);

  --border-gold:  1px solid rgba(201,164,74,0.35);
  --border-green: 1px solid rgba(45,90,61,0.25);

  --transition: 0.25s ease;

  /* ---- SURNAME PALETTE ----
     Shared family colors for both charts (melrose-tree, melrose-network)
     and any future visualization. Warm, earthy tones for the core
     Melrose Irish-Catholic surnames. Keep these in sync with the JS
     SURNAME_COLORS maps in the chart files. */
  --surname-judge:       #b5552e;
  --surname-ryan:        #3f7d8c;
  --surname-hannam:      #8c6a3f;
  --surname-mcgrath:     #7a5fa0;
  --surname-scieszinski: #5a8a4a;
  --surname-sinnott:     #a9762a;
  --surname-murphy:      #a8443f;
  --surname-walsh:       #8a6f2a;
  --surname-feehan:      #4a7a6e;
  --surname-mcgee:       #9c5a7a;
  --surname-carmody:     #7a8a3a;
  --surname-coady:       #5a6aa0;
  --surname-knowles:     #a06a3a;
  --surname-oconnor:     #3a8a7a;
  --surname-flattery:    #8a5a3a;
  --surname-curran:      #6a8a5a;
  --surname-craig:       #9a7a4a;
  --surname-mcdonald:    #7a4a6a;
  --surname-fitzgerald:  #3a7a5a;
  --surname-costello:    #a05a4a;
  --surname-cotter:      #5a7a8a;
  --surname-glynn:       #8a6a5a;
  --surname-knowlton:    #6a5a8a;
  --surname-carbin:      #74772f;

  /* Fallback for surnames not in the named palette */
  --surname-default: rgba(70,62,46,0.95);

  /* ---- CHART SURFACE TOKENS ----
     Darker companion surface for the genealogy charts. They sit on a
     deep ground rather than parchment so the colored nodes pop. These
     map the chart-local variables to the shared system. */
  --chart-bg:        #16120e;  /* chart canvas ground */
  --chart-surface:   #24201a;  /* node card fill */
  --chart-ink:       #e4d9c3;  /* chart text */
  --chart-ink-muted: #8a7a62;  /* chart muted text */
}