/* =========================================================================
   Webtilly design tokens — v1.1 (5 Oct 2026)
   Single source of truth for the theme, the calculator plugin and the SVG
   chart helper. Change values here only; nothing else should hard-code a
   color, font or size.

   v1.1: coral and amber now match the logo artwork exactly (#EE6A4B, #F6B066).

   Decisions recorded in:
     - webtilly-phase0-color-decisions.md   (colors, button contrast, chart palette)
     - webtilly-phase0-typography.md        (Poppins + Inter figures, type scale)

   Font file paths below assume this file sits next to a /fonts/ folder in the
   theme. Adjust the url() paths to match the theme layout.
   ========================================================================= */


/* ---------- 1. Fonts (self-hosted) ---------------------------------------- */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2"); }

/* Inter is declared in theme.json (fontFace) as static WOFF2 files. */

/* Arial-metric fallback so text barely moves when Poppins swaps in.
   Matches Windows, macOS and iOS; Android may still shift slightly. */
@font-face { font-family: "Poppins Fallback"; src: local("Arial");
  size-adjust: 113.6%; ascent-override: 92.4%; descent-override: 30.8%; line-gap-override: 8.8%; }


:root {

  /* ---------- 2. Color: brand ---------------------------------------------- */

  --coral:            #EE6A4B;  /* fills, graphics, large shapes, coral-on-dark text */
  --coral-hover:      #F0775B;  /* primary button hover (charcoal label stays) */
  --coral-ink:        #BF4524;  /* coral TEXT on light backgrounds (5.13:1 on white) */
  --coral-ink-strong: #A63A1E;  /* hover/pressed for coral-ink links (6.47:1 with white) */
  --coral-tint:       #FDEDE7;  /* pastel backgrounds, kicker badges */
  --amber:            #F6B066;  /* DECORATIVE ONLY. 1.86:1 on white: never text, icons or chart series */
  --charcoal:         #1F1F1F;

  /* ---------- 3. Color: neutrals and text ---------------------------------- */

  --white:            #FFFFFF;
  --page:             #F7F7F7;  /* page / output-panel background */
  --ink:              #1F1F1F;  /* primary text */
  --muted:            #6B6560;  /* secondary text: 5.74:1 on white, 5.36:1 on page */
  --line:             #EDEAE5;  /* hairlines, card borders (decorative) */
  --ink-on-dark:      #FFFFFF;
  --ink-on-dark-soft: #D8D4CE;  /* hero lede on charcoal: 11.17:1 */

  /* Text that sits ON a fill (labels on buttons) */
  --on-coral:         #1F1F1F;  /* charcoal on coral: 5.34:1 */
  --on-coral-ink:     #FFFFFF;  /* white on coral-ink: 5.13:1 */

  /* Focus: coral is only 3.09:1 on white, so rings are neutral */
  --focus-on-light:   #1F1F1F;
  --focus-on-dark:    #FFFFFF;

  /* ---------- 4. Color: charts (fixed order, never cycled) ----------------- */

  --series-1: #EE6A4B;  /* coral  */
  --series-2: #2A78D6;  /* blue   */
  --series-3: #1BAF7A;  /* green  (2.82:1 on white: needs direct labels) */
  --series-4: #C98500;  /* gold   */
  --series-5: #4A3AA7;  /* violet */
  --series-6: #E87BA4;  /* pink   (2.69:1 on white: needs direct labels) */
  --series-other: #898781;
  --chart-surface:  #FFFFFF;
  --chart-gridline: #E1E0D9;
  --chart-axis:     #C3C2B7;

  /* ---------- 4b. Color: status (reserved meaning; always icon + label) ----- */
  /* Text variants are for words; icon variants for icons and borders.
     Warning is a dark amber-brown on purpose: brand --amber is decorative and
     must never appear in the same view as a warning. Info blue is NOT a chart
     series color; do not reuse it for "series 2". */

  --success-text: #146C2E;  --success-icon: #1E8E3E;  --success-tint: #E7F5EC;
  --warning-text: #8A5300;  --warning-icon: #B26B00;  --warning-tint: #FFF3D6;
  --error-text:   #B42318;  --error-icon:   #D92D20;  --error-tint:   #FDECEA;
  --info-text:    #1D5FB0;  --info-icon:    #2A78D6;  --info-tint:    #E8F0FB;

  /* ---------- 5. Typography ------------------------------------------------- */

  --font-brand:   "Poppins", "Poppins Fallback", system-ui, sans-serif;
  --font-figures: "Inter", "Poppins", "Poppins Fallback", system-ui, sans-serif;

  --fs-caption: 0.75rem;                                   /* 12px: kickers, chart text, fine print */
  --fs-small:   0.875rem;                                  /* 14px: labels, notes, nav, footer */
  --fs-body:    1rem;                                      /* 16px: body, inputs, buttons */
  --fs-lede:    1.125rem;                                  /* 18px: intros, card titles */
  --fs-h3:      1.375rem;                                  /* 22px */
  --fs-h2:      1.75rem;                                   /* 28px */
  --fs-h1:      clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);  /* 28-36px: page titles */
  --fs-hero:    clamp(2rem, 1.4rem + 2.6vw, 2.75rem);      /* 32-44px: homepage hero only */
  --fs-display-num: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem); /* 28-44px: calculator result */

  --lh-tight:   1.1;   /* display numbers */
  --lh-heading: 1.2;
  --lh-ui:      1.5;
  --lh-reading: 1.6;

  --measure: 58ch;     /* reading text width: about 70 characters in Poppins */

  /* ---------- 6. Spacing, radius, shadow, layout --------------------------- */

  --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;

  --radius-pill:  999px;  /* buttons, badges */
  --radius-card:  20px;   /* calculator card */
  --radius-inner: 14px;   /* result and chart cards */
  --radius-input: 12px;
  --radius-deco:  32px;   /* decorative hero shapes */

  --shadow-card:  0 4px 24px rgba(31, 31, 31, 0.06);
  --shadow-inner: 0 2px 10px rgba(31, 31, 31, 0.05);

  --wrap-max: 1080px;
  --gutter:   24px;
}


/* ---------- 7. Base rules that depend on the tokens ------------------------- */

html { font-size: 100%; }  /* keeps rem tied to the visitor's browser setting */

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: var(--lh-heading); }
h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
em { font-style: normal; font-weight: 600; }  /* no italic files are loaded */

.reading { max-width: var(--measure); line-height: var(--lh-reading); }

/* Figures: any numeric data. Not for numbers inside running prose. */
.num, .result .value, .formula-row .val, td.num, .field input,
.chart-wrap .axis-label, .chart-wrap .chart-value {
  font-family: var(--font-figures);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.num-display {
  font-family: var(--font-figures);
  font-size: var(--fs-display-num);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--coral);  /* safe only at >= 28px and weight >= 700; use --coral-ink if it ever renders smaller */
}
.num-display.num-long { font-size: calc(var(--fs-display-num) * 0.8); }  /* strings over ~10 characters */

/* Chart text: 12px minimum, Medium or heavier */
.chart-wrap .axis-label  { font-size: var(--fs-caption); font-weight: 500; fill: var(--muted); }
.chart-wrap .chart-value { font-size: var(--fs-caption); font-weight: 600; fill: var(--ink); }

/* Buttons: charcoal label on coral (5.34:1), not white (3.09:1) */
.btn-primary {
  background: var(--coral);
  color: var(--on-coral);
  border: 0;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font: 600 var(--fs-body)/1 var(--font-brand);
  text-decoration: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--coral-hover); }

.btn-ghost {
  background: transparent;
  color: var(--ink-on-dark);
  border: 1.5px solid rgba(255, 255, 255, 0.5);  /* was 0.3: too faint against charcoal */
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font: 600 var(--fs-body)/1 var(--font-brand);
  text-decoration: none;
}

/* Kicker badge: coral-ink on tint = 4.51:1 (coral on tint was 2.72:1) */
.kicker {
  display: inline-block;
  background: var(--coral-tint);
  color: var(--coral-ink);
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* Coral-colored text links on light backgrounds */
a.text-link { color: var(--coral-ink); }
a.text-link:hover { color: var(--coral-ink-strong); }

/* Focus rings: neutral, visible on both light and dark surfaces */
:focus-visible { outline: 3px solid var(--focus-on-light); outline-offset: 2px; }
.on-dark :focus-visible, .hero :focus-visible { outline-color: var(--focus-on-dark); }

/* Status messages: tint background, status-colored text, icon, and a label word.
   Never color alone. Markup: <div class="alert alert-warning" role="status">
   <svg class="alert-icon">...</svg><strong>Check this:</strong> message</div> */
.alert { display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-input);
  border: 1px solid currentColor; font-size: var(--fs-small); line-height: var(--lh-ui); }
.alert-icon { flex: none; width: 20px; height: 20px; }
.alert-success { background: var(--success-tint); color: var(--success-text); }
.alert-warning { background: var(--warning-tint); color: var(--warning-text); }
.alert-error   { background: var(--error-tint);   color: var(--error-text); }
.alert-info    { background: var(--info-tint);    color: var(--info-text); }
.alert-success .alert-icon { color: var(--success-icon); }
.alert-warning .alert-icon { color: var(--warning-icon); }
.alert-error   .alert-icon { color: var(--error-icon); }
.alert-info    .alert-icon { color: var(--info-icon); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}