/* Hallmark · portable design tokens for YourFree.website
 * theme: custom warm — cream paper · forest trust · terracotta money-moment · apricot decoration
 * Fonts: Fraunces (display) + Nunito Sans (body). All colours OKLCH, all spacing on a 4pt scale.
 * Every colour/font/space value in styles.css references a token here. */
:root {
  /* Fonts (2 families — display + body) */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Colour — warm, AA-verified (see contrast notes) */
  --color-paper:        #fffdf6;   /* #FFFDF6 base surface */
  --color-oat:          #f4ecdd;   /* #F4ECDD cards, receipt, footer-step paper */
  --color-sage:         #dcefe4;  /* #DCEFE4 calculator + diagram fills */
  --color-ink:          #17211c;  /* #17211C body text — ≥13.8:1 on every surface */
  --color-muted:        #4a574f;  /* #4A574F secondary text — ≥6.4:1 */
  --color-line:         #e2dac9;   /* #E2DAC9 warm hairline (decorative) */
  --color-forest:       #1f4d35;  /* #1F4D35 trust colour — buttons, bands, footer */
  --color-forest-deep:  #16603e;  /* #16603E button hover */
  --color-on-forest:    #fffdf6;   /* cream text on forest — 9.5:1 */
  --color-accent:           #ff9a52;  /* #FF9A52 apricot — DECORATIVE ONLY (underlines, dots, glow); never text on cream */
  --color-apricot-on-forest: #ff9a52; /* apricot reads 4.6:1 on forest — ok for the on-dark eyebrow */
  --color-accent-strong:    #b4471a;  /* #B4471A terracotta — small text (eyebrows, links): 5.35:1 */
  --color-money:            #d9602b;  /* #D9602B vivid terracotta — large $0 only (3.65:1, large-text AA) */
  --color-accent-ink:       #17211c; /* ink, for text on an apricot fill (apricot is light) */
  --color-focus:            #1f4d35; /* forest focus ring */

  /* Type scale (~1.2 ratio, 16px base) */
  --text-xs:   0.8rem;    /* 12.8px — labels, legal */
  --text-sm:   0.92rem;   /* 14.7px */
  --text-base: 1rem;      /* 16px body */
  --text-md:   1.18rem;   /* 18.9px lede / body-large */
  --text-lg:   1.4rem;    /* 22.4px h3 / value figures */

  /* Spacing — 4pt scale */
  --space-3xs: 0.125rem;  /* 2px */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs:  0.5rem;    /* 8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2.5rem;    /* 40px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */

  /* Radius */
  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* Elevation — single soft, forest-tinted shadow per level (derived from --color-forest) */
  --shadow-card: 0 12px 34px color-mix(in oklch, var(--color-forest) 10%, transparent);
  --shadow-lift: 0 18px 40px color-mix(in oklch, var(--color-forest) 16%, transparent);
  --shadow-glow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 30%, transparent);

  /* z-index — named scale */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-tooltip: 600;

  /* Layout */
  --max-width: 1140px;
  --gutter: clamp(1.1rem, 4vw, 3rem);
}