/* ─────────────────────────────────────────────────────────────
   The Funeral Plan Register — Design Tokens
   Colors + Type + Spacing + Shape
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  /* ============ COLORS ============ */

  /* Brand yellow — the signature of the FPR system.
     #FFDD25 is the primary yellow used in the logo, CTAs and banners. */
  --fpr-yellow-700: #998416;     /* stroke / deep accent */
  --fpr-yellow-600: #CCB01D;     /* darker hover for yellow on light */
  --fpr-yellow-500: #FFDD25;     /* primary brand yellow */
  --fpr-yellow-400: #FFE351;     /* gentle yellow fill */
  --fpr-yellow-300: #FFEA7B;     /* tonal card */
  --fpr-yellow-200: #FFF1A7;     /* hover fill (secondary buttons) */
  --fpr-yellow-100: #FFF8D3;     /* soft wash */
  --fpr-yellow-50:  #FFFCE8;     /* page-section wash (cream) */
  --fpr-yellow-25:  #FFFEF4;     /* lightest wash */

  /* Ink — true black is intentional, the type is black. */
  --fpr-ink:        #000000;     /* text + icons */
  --fpr-ink-soft:   #332C07;     /* bark text on yellow */
  --fpr-ink-mute:   #66580F;     /* muted caption on yellow */
  --fpr-ink-grey:   #666666;     /* secondary grey text */

  /* Neutrals */
  --fpr-white:      #FFFFFF;
  --fpr-paper:      #FFFCE8;     /* cream page background */
  --fpr-line:       #E5E5E5;
  --fpr-line-soft:  #F2F2F2;
  --fpr-divider:    #D9D9D9;

  /* Semantic */
  --fpr-success:    #67B981;     /* gentle green seen in success dots */
  --fpr-success-2:  #43A862;
  --fpr-success-3:  #29653A;
  --fpr-error:      #D33;
  --fpr-shadow-warm: rgba(178, 151, 3, 0.43);  /* signature warm shadow */

  /* ============ SURFACES ============ */
  --surface-page:      var(--fpr-white);
  --surface-cream:     var(--fpr-yellow-50);
  --surface-yellow:    var(--fpr-yellow-500);
  --surface-yellow-soft:var(--fpr-yellow-300);

  /* ============ BORDERS / RADII ============
     Signature asymmetric radius: 0 24 0 24 (top-right + bottom-left rounded)
     Large variant used on hero cards: 0 192 0 192 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --radius-xl: 48px;
  --radius-2xl: 192px;
  --radius-asym-sm: 0 16px 0 16px;   /* icon circles in buttons */
  --radius-asym-md: 0 24px 0 24px;   /* buttons, header chrome */
  --radius-asym-lg: 0 48px 0 48px;   /* larger cards */
  --radius-asym-xl: 0 192px 0 192px; /* hero cards, CTA panels */

  /* ============ ELEVATION ============
     Shadows are warm, sparingly used — they tint the page. */
  --shadow-soft:  0px 1px 4px 0px rgba(178, 151, 3, 0.43);
  --shadow-card:  0px 2px 12px 0px rgba(178, 151, 3, 0.22);

  /* ============ SPACING ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;    /* gutter for 1920px layout */

  /* Content container — 1920 viewport uses 192px gutter → 1536px inner */
  --container-max: 1536px;
  --container-gutter: 192px;

  /* Top yellow stripe — shows on every section edge */
  --brand-stripe-h: 12px;

  /* ============ TYPOGRAPHY TOKENS ============ */
  --font-display: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: 64px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      32px;
  --fs-h4:      24px;
  --fs-h5:      21px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-normal:1.4;
  --lh-body:  1.55; /* 22/16 ratio as seen in Figma */
}

/* ============ GLOBAL BASE ============ */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fpr-ink);
  background: var(--fpr-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ SEMANTIC TYPE ============
   Display + subtitle use Fira Sans Bold; body copy uses Roboto.
   In the Figma, headlines are tight, bold, and sentence-case with periods. */

.fpr-display,
h1.fpr {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--fpr-ink);
  letter-spacing: -0.01em;
}

.fpr-h1 { font-family: var(--font-body); font-weight: 700; font-size: 36px; line-height: 40px; }
.fpr-h2 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 36px; }
.fpr-h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 32px; }
.fpr-h4 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 28px; }

.fpr-subtitle { /* small eyebrow above headlines, SOMETIMES ALL-CAPS */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fpr-ink-mute);
}

.fpr-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--fpr-ink);
}

.fpr-body-large {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 36px;
  color: var(--fpr-ink);
}

.fpr-caption {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  color: var(--fpr-ink-mute);
}

.fpr-link {
  color: var(--fpr-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.fpr-link:hover { text-decoration-thickness: 2px; }