/* ─────────────────────────────────────────────────────────────
   TaxCalc.ie — Color & Type Foundations
   Used by all UI kits, slides, and design system cards.
   ───────────────────────────────────────────────────────────── */

/* ── Font imports ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ─────────── COLORS — RAW PALETTE ─────────── */

  /* Brand — Deep Teal (the "calm professional" anchor) */
  --teal-50:  #EBF2F1;
  --teal-100: #D2E1DF;
  --teal-200: #A4C2BE;
  --teal-300: #6F9C97;
  --teal-400: #437772;
  --teal-500: #265B57;   /* primary brand */
  --teal-600: #1F4E4A;
  --teal-700: #173B38;
  --teal-800: #102827;
  --teal-900: #0A1A19;

  /* Accent — Warm Gold (for highlights, credits, takeaway pay) */
  --gold-50:  #FAF5EC;
  --gold-100: #F1E6CC;
  --gold-200: #E3CC97;
  --gold-300: #D2AE62;
  --gold-400: #B8895A;
  --gold-500: #9C6F3E;
  --gold-600: #785328;

  /* Neutrals — warm, paper-like (not pure greys) */
  --paper:    #F7F3EC;     /* primary canvas */
  --paper-2:  #EFE9DD;     /* sunken surface */
  --paper-3:  #E5DDCB;     /* dividers when warmer feel needed */
  --ink-50:   #FAF8F3;
  --ink-100:  #F0EDE5;
  --ink-200:  #DCD7C9;
  --ink-300:  #B9B2A0;
  --ink-400:  #8A8472;
  --ink-500:  #5E5949;
  --ink-600:  #3F3B30;
  --ink-700:  #2A2722;
  --ink-800:  #1A1814;
  --ink-900:  #0E0D0A;

  /* Semantic — used in charts, deltas, deductions.
     AA audit on --paper #F7F3EC: positive-500 4.6:1 · negative-500 4.9:1 — both pass AA Normal.
     warn-500 #A07A1D is 3.6:1 (fills/large only); use warn-700 for warning TEXT. */
  --positive-50:  #E8F1EA;     /* increase / take-home / credit */
  --positive-500: #2E7D4F;
  --positive-700: #1F5734;

  --negative-50:  #F6E9E4;     /* deductions / decrease */
  --negative-500: #B0492E;
  --negative-700: #7F2F1D;

  --info-50:      #E8EEF4;     /* informational notes */
  --info-500:     #3C6C9C;
  --info-700:     #264866;

  --warn-50:      #F6EFD8;     /* gentle attention, not alarm */
  --warn-500:     #A07A1D;
  --warn-700:     #6B5012;

  /* Chart palette — calm, distinguishable, colorblind-considered.
     Order chosen so first 3 cover the common "Tax / USC / PRSI" split. */
  --chart-1: #265B57;   /* deep teal — income tax */
  --chart-2: #B8895A;   /* gold — USC */
  --chart-3: #6F9C97;   /* muted teal — PRSI */
  --chart-4: #3C6C9C;   /* slate blue — pension */
  --chart-5: #A07A1D;   /* mustard — BIK */
  --chart-6: #8A8472;   /* warm grey — other */

  /* ─────────── SEMANTIC COLOR TOKENS ─────────── */
  --bg:          var(--paper);
  --bg-sunken:   var(--paper-2);
  --bg-raised:   #FFFFFF;
  --bg-inverse:  var(--teal-700);

  --fg:          var(--ink-800);     /* primary text */
  --fg-muted:    var(--ink-500);     /* secondary text */
  --fg-subtle:   var(--ink-400);     /* hints, captions */
  --fg-disabled: var(--ink-300);
  --fg-on-brand: #FFFFFF;
  --fg-inverse:  var(--paper);

  --brand:       var(--teal-500);
  --brand-hover: var(--teal-600);
  --brand-press: var(--teal-700);
  --brand-soft:  var(--teal-50);

  /* Gold is split by USE because it is low-contrast on paper.
     Measured against --paper #F7F3EC (WCAG 2.1):
       gold-400 #B8895A → 2.8:1  · FILLS / large hero on white only — NEVER text on paper
       gold-500 #9C6F3E → 4.0:1  · large numerals ≥24px on paper (passes AA Large 3:1)
       gold-600 #785328 → 6.2:1  · any gold TEXT below 24px (passes AA Normal 4.5:1)
     Rule: pick the token by role, not by eye. */
  --accent:        var(--gold-400);   /* chart slice, eyebrow underline, hero figure on WHITE */
  --accent-figure: var(--gold-500);   /* large take-home numerals on paper (≥24px) */
  --accent-text:   var(--gold-600);   /* gold labels / small numbers — AA-safe on paper & white */
  --accent-soft:   var(--gold-50);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-soft:   var(--paper-3);

  --focus-ring:  color-mix(in oklch, var(--teal-500) 45%, transparent);

  /* ─────────── TYPE — FAMILIES ─────────── */
  --font-display: 'Newsreader', 'Source Serif Pro', Georgia, serif;
  --font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-num:     'IBM Plex Mono', ui-monospace, monospace; /* tabular currency */

  /* ─────────── TYPE — SCALE ─────────── */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.12em;

  /* ─────────── SPACING ─────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ─────────── RADII ─────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ─────────── ELEVATION (low and quiet — financial restraint) ─────────── */
  --shadow-xs: 0 1px 0 rgba(26, 24, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.06), 0 1px 0 rgba(26, 24, 20, 0.03);
  --shadow-md: 0 4px 12px rgba(26, 24, 20, 0.06), 0 1px 2px rgba(26, 24, 20, 0.04);
  --shadow-lg: 0 12px 28px rgba(26, 24, 20, 0.08), 0 2px 6px rgba(26, 24, 20, 0.05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* ─────────── MOTION ─────────── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;
}

/* ─────────── SEMANTIC HTML DEFAULTS ─────────── */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--ink-900);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 500;
  color: var(--ink-900);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: 500;
  color: var(--ink-900);
}
h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--ink-800);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg);
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow--sm { font-size: var(--fs-11); }
.eyebrow--accent { color: var(--accent-text); }

code, .mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Currency display — large numbers for hero takeaway figures */
.currency {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: var(--tracking-snug);
  font-weight: 500;
}