/* =========================================================================
   DateTimeChecker design tokens, v0.1 PLACEHOLDER palette (4 Nov 2026)
   Forked from the Webtilly tokens v1.1. Single source of truth for the theme
   and any tool plugin. Change values here only.

   The colors below are placeholders chosen for contrast, not an approved brand.
   Contrast ratios in the comments were computed on 4 Nov 2026.
   ========================================================================= */


/* ---------- 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 ---------------------------------------------- */

  --brand:            #2563EB;  /* fills, graphics, large shapes; white label on it = 5.17:1 */
  --brand-hover:      #1D4ED8;  /* primary button hover (white label = 6.70:1) */
  --brand-ink:        #1D4ED8;  /* brand TEXT on light backgrounds (6.70:1 on white) */
  --brand-ink-strong: #1E40AF;  /* hover/pressed for brand-ink links (8.72:1 on white) */
  --brand-tint:       #E8F0FE;  /* pastel backgrounds, kicker badges (brand-ink on it = 5.85:1) */
  --accent:            #F5B83D;  /* DECORATIVE ONLY. 1.78:1 on white: never text, icons or chart series */
  --dark:         #0F1B33;  /* hero and dark surfaces (white on it = 17.14:1) */

  --white:            #FFFFFF;
  --page:             #F6F8FB;  /* page / output-panel background */
  --ink:              #101828;  /* primary text (17.75:1 on white) */
  --muted:            #566074;  /* secondary text: 6.32:1 on white, 5.94:1 on page */
  --line:             #E4E8EF;  /* hairlines, card borders (decorative) */
  --ink-on-dark:      #FFFFFF;
  --ink-on-dark-soft: #CBD5E8;  /* hero lede on dark: 11.61:1 */

  /* Text that sits ON a fill (labels on buttons) */
  --brand-on-dark:    #7FA8FF;  /* brand-colored text on dark: 7.30:1 on --dark */
  --on-brand:         #FFFFFF;  /* white on brand: 5.17:1 */
  --on-brand-ink:     #FFFFFF;  /* white on brand-ink: 6.70:1 */

  /* Focus: brand 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: #2563EB;  /* brand blue */
  --series-2: #D9531E;  /* orange (4.03:1 on white: use direct labels) */
  --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 accent-brown on purpose: brand --accent is decorative and
     must never appear in the same view as a warning. Info teal is NOT a chart
     series color; do not reuse it for a series. */

  --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:    #0B6A78;  --info-icon:    #1593A6;  --info-tint:    #E3F4F7;

  /* ---------- 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(16, 24, 40, 0.06);
  --shadow-inner: 0 2px 10px rgba(16, 24, 40, 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(--brand);  /* safe only at >= 28px and weight >= 700; use --brand-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: dark label on brand (5.34:1), not white (3.09:1) */
.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
  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(--brand-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 dark */
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font: 600 var(--fs-body)/1 var(--font-brand);
  text-decoration: none;
}

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

/* Brand-colored text links on light backgrounds */
a.text-link { color: var(--brand-ink); }
a.text-link:hover { color: var(--brand-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; }
}