/* Design tokens — the single source for colour, type, and spacing.

   Palette and type follow docs/design/homepage-figma-make (design-system
   markdown): deep navy grounds, a gold accent scale, warm cream light
   sections, Playfair Display for headings and Inter for everything else.

   The original token names are kept so components written against the first
   palette re-theme without edits. The admin panel pins its own values in
   admin.css and is unaffected by changes here. */

:root {
  /* ── Navy ────────────────────────────────────────────── */
  --navy-1:     #060C1A;   /* deepest — hero, closing */
  --navy-2:     #0C1424;   /* section mid-tone */
  --navy-3:     #091830;   /* gradient end, slightly blue */
  --navy-4:     #1E3054;   /* navy button top */
  --navy-brand: #042048;   /* the seal's own navy */
  --near-black: #04080F;   /* footer */

  /* ── Gold ────────────────────────────────────────────── */
  --gold:       #C4973A;   /* primary accent: lines, borders, badges */
  --gold-light: #E8C464;   /* gradient highlights, text on dark */
  --gold-mid:   #DDB254;
  --gold-dark:  #B8873A;
  --gold-deep:  #9A7428;
  --gold-ink:   #1A0F00;   /* text on gold buttons */
  /* Gold that passes WCAG AA as small text on cream (4.6:1). The design's
     #C4973A is 2.5:1 there, so on light grounds text uses this and only the
     decorative lines keep the brighter gold. */
  --gold-text:  #7A5A1B;

  /* ── Warm neutrals ───────────────────────────────────── */
  --cream:      #F7F4EE;
  --cream-2:    #EDEAE2;
  --cream-3:    #F5F2EB;   /* pill gradient end */
  --ink-warm:   #4A4540;   /* paragraph text on light */
  --muted-warm: #5E5852;   /* captions on light — 6.3:1 on cream */

  /* ── Text on dark ────────────────────────────────────── */
  --on-dark:       rgba(255,255,255,.86);
  --on-dark-soft:  rgba(255,255,255,.72);
  --on-dark-faint: rgba(255,255,255,.58);  /* ≥ 7:1 on navy-2 */

  /* ── Compatibility names (first palette) ─────────────── */
  --color-ground:       var(--cream);
  --color-ground-alt:   var(--cream-2);
  --color-structure:    var(--navy-2);
  --color-structure-dp: var(--navy-1);
  --color-accent:       var(--gold);
  --color-accent-dark:  var(--gold-text);

  --color-ink:          #1A1610;
  --color-slate:        var(--muted-warm);
  --color-faint:        #6B6560;
  --color-rule:         #DED8CC;
  --color-rule-dark:    rgba(255,255,255,.12);

  --color-danger:       #B3261E;
  --color-success:      #1B7A4B;
  --color-notice-bg:    #FFF6DA;
  --color-notice-line:  #E0A800;

  /* ── Type ────────────────────────────────────────────── */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: 0.875rem;
  --step-0:  1rem;          /* 16px */
  --step-1:  1.25rem;
  --step-2:  1.5625rem;
  --step-3:  1.953rem;
  --step-4:  2.6rem;
  --step-5:  3.6rem;

  /* ── Spacing ─────────────────────────────────────────── */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

  --row-pad: 6rem;        /* 96px — the design's py-24; pages run to many
                             sections so the 128px lg variant is not used */
  --measure: 64ch;
  --shell:   1280px;

  --radius:    8px;       /* pills, badges, legacy cards */
  --radius-sm: 2px;       /* buttons */
  --radius-lg: 12px;      /* cards, photo frames */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 68px;
}

@media (max-width: 767px) {
  :root { --row-pad: 4rem; --header-h: 60px; }
}