/* =============================================================================
   CalcPaid design tokens
   -----------------------------------------------------------------------------
   Every colour, space, radius and shadow used anywhere in the product is declared
   here once. Components never write a literal colour; they reference a token. That
   is what makes a second calculator look like it belongs, and what makes dark mode
   a block of overrides rather than a rewrite.

   The palette is deliberately not the usual fintech blue. The anchor is a deep
   spruce green — money, but a quiet, ledger-ink sort of money — set against warm
   greys rather than the cold blue-greys every dashboard uses.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- type ------------------------------------------------------------- */
  /* System fonts only: nothing to download, nothing to reflow, no request to a
     font CDN that would see a visitor arriving at a page about their salary. */
  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-numeric:
    ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --text-2xs: 0.6875rem; /* 11px — swatch captions only */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.9375rem;/* 15px — body default, a touch tighter than 16 for density */
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- neutrals --------------------------------------------------------- */
  /* Warm-tinted greys. Pure #000/#fff appear nowhere. */
  --paper: #fbfaf8;        /* page background */
  --surface: #ffffff;      /* cards */
  --surface-sunken: #f4f2ee;
  --surface-raised: #ffffff;

  --ink: #14181c;          /* primary text */
  --ink-soft: #414a52;     /* secondary text */
  --ink-muted: #6a747d;    /* labels, hints — 4.6:1 on --paper */
  --ink-faint: #97a0a8;    /* placeholders only, never meaningful text */
  --ink-invert: #ffffff;

  --line: #e4e0d9;         /* hairlines */
  --line-strong: #cfc9bf;  /* input borders */

  /* --- brand ------------------------------------------------------------ */
  --brand-50: #eef6f3;
  --brand-100: #d7eae3;
  --brand-200: #a9d3c6;
  --brand-500: #14806a;
  --brand-600: #0d6b58;    /* primary actions — 4.9:1 on white */
  --brand-700: #0a5546;
  --brand-900: #072e26;
  --brand-contrast: #ffffff;

  /* --- feedback --------------------------------------------------------- */
  --danger-50: #fdf0ef;
  --danger-600: #b4362c;
  --warning-50: #fdf5e7;
  --warning-600: #92621a;
  --success-600: #0d6b58;

  /* --- breakdown tones -------------------------------------------------- */
  /* Eight hues that stay distinguishable next to each other and survive the
     common forms of colour blindness as an ordered sequence. The list beneath the
     bar repeats every one of them in words, so colour is never the only channel. */
  --tone-takehome: #14806a;
  --tone-federal: #4256b8;
  --tone-social: #c07c22;
  --tone-medicare: #a4436b;
  --tone-state: #2a7d9c;
  --tone-local: #7853a8;
  --tone-payroll: #7c8b94;
  --tone-deductions: #8a7440;

  /* --- space ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-12: 5.5rem;

  /* --- shape ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows are low and wide — the look of paper lifted slightly, not of a
     card floating in space. */
  --shadow-sm: 0 1px 2px rgb(20 24 28 / 0.06);
  --shadow-md: 0 2px 4px rgb(20 24 28 / 0.05), 0 6px 16px -6px rgb(20 24 28 / 0.1);
  --shadow-lg: 0 4px 8px rgb(20 24 28 / 0.05), 0 20px 40px -18px rgb(20 24 28 / 0.22);
  --shadow-focus: 0 0 0 3px var(--brand-200);

  /* --- controls --------------------------------------------------------- */
  /* 48px is the floor for anything a thumb has to hit. */
  --control-height: 48px;
  --control-height-sm: 38px;
  --focus-ring: 2px solid var(--brand-600);
  --focus-offset: 2px;

  /* --- layout ----------------------------------------------------------- */
  --page-max: 1180px;
  --prose-max: 68ch;
  --gutter: var(--space-5);

  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-7);
    --text-base: 1rem;
  }
}

/* -----------------------------------------------------------------------------
   Dark mode.

   Not an inversion: the surfaces get a green-black cast that matches the brand,
   the hairlines get lighter rather than darker, and every tone is lifted so it
   still reads against a dark card. Text contrast targets are the same.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --paper: #0e1214;
    --surface: #161b1e;
    --surface-sunken: #111618;
    --surface-raised: #1c2225;

    --ink: #f2f4f4;
    --ink-soft: #c3cacd;
    --ink-muted: #98a2a6;
    --ink-faint: #6c777c;
    --ink-invert: #0e1214;

    --line: #262d31;
    --line-strong: #394347;

    --brand-50: #10231e;
    --brand-100: #16352c;
    --brand-200: #1f5347;
    --brand-500: #3fb195;
    --brand-600: #48c0a3;
    --brand-700: #6fd3ba;
    --brand-900: #d7f2e9;
    --brand-contrast: #06231c;

    --danger-50: #2a1715;
    --danger-600: #f08a7e;
    --warning-50: #2a2213;
    --warning-600: #e5b45f;
    --success-600: #48c0a3;

    --tone-takehome: #3fb195;
    --tone-federal: #7e8ce6;
    --tone-social: #e0a558;
    --tone-medicare: #d97ba0;
    --tone-state: #5cb2d1;
    --tone-local: #a68ad8;
    --tone-payroll: #93a1a9;
    --tone-deductions: #c0a568;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 6px 16px -6px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.35), 0 20px 40px -18px rgb(0 0 0 / 0.65);
    --shadow-focus: 0 0 0 3px rgb(72 192 163 / 0.35);
  }
}

/* -----------------------------------------------------------------------------
   Printing.

   A printed paycheck estimate is something someone shows to another person, so it
   gets the same tokens with paper-appropriate values rather than a separate style.
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --paper: #ffffff;
    --surface: #ffffff;
    --surface-sunken: #ffffff;
    --surface-raised: #ffffff;
    --ink: #000000;
    --ink-soft: #1a1a1a;
    --ink-muted: #3a3a3a;
    --line: #b8b8b8;
    --line-strong: #8a8a8a;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}