/* ==========================================================================
   MyPersonalCalculator.com — Design Tokens
   Signature concept: the "readout" — every result renders inside a dark
   LCD-style panel with tabular monospace numerals, echoing a real
   calculator screen. Used in the hero, in every calculator's result card,
   and for key stats across the site.
   ========================================================================== */

:root {
  /* ---- Color: light mode (default) ---- */
  --ink-950: #0b1220;
  --ink-900: #101a2e;
  --ink-800: #182544;
  --ink-700: #263457;

  --paper-0: #fbfcfe;
  --paper-50: #f2f4f8;
  --paper-100: #e7eaf1;
  --paper-200: #d7dce7;

  --line: #dde1ea;
  --line-strong: #c3c9d8;

  --text-primary: var(--ink-950);
  --text-secondary: #4a5573;
  --text-muted: #78829c;
  --text-on-ink: #eef1fa;
  --text-on-ink-muted: #9aa6c4;

  --surface: var(--paper-0);
  --surface-raised: #ffffff;
  --surface-sunken: var(--paper-50);
  --surface-ink: var(--ink-950);
  --surface-ink-raised: var(--ink-900);

  /* Signature accent: digital-readout mint */
  --accent-500: #12b886;
  --accent-400: #2fd3a1;
  --accent-300: #6ee7c4;
  --accent-glow: rgba(47, 211, 161, 0.35);

  /* Secondary accent: warm amber, used sparingly (warnings/highlights) */
  --amber-500: #ee9a1f;
  --amber-400: #f6b545;

  --danger-500: #e0523f;
  --danger-050: #fdeeec;

  --focus-ring: #1c7ed6;

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --step--1: clamp(0.78rem, 0.765rem + 0.08vw, 0.8125rem);
  --step-0: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
  --step-1: clamp(1.0625rem, 1.03rem + 0.15vw, 1.1875rem);
  --step-2: clamp(1.25rem, 1.2rem + 0.3vw, 1.4375rem);
  --step-3: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);
  --step-4: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --step-5: clamp(2.1rem, 1.75rem + 1.9vw, 2.75rem);

  /* Dedicated scale for the readout numerals — the one place a larger
     tabular-numeral display is intentional, kept separate so ordinary
     headings never inherit an oversized readout scale. */
  --step-readout: clamp(1.65rem, 1.4rem + 1.4vw, 2.35rem);

  /* ---- Spacing (8pt-derived scale) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* ---- Shape & elevation ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06), 0 1px 1px rgba(11, 18, 32, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(11, 18, 32, 0.16);
  --shadow-lg: 0 24px 48px -16px rgba(11, 18, 32, 0.24);
  --shadow-readout: inset 0 0 0 1px rgba(47, 211, 161, 0.14), 0 16px 32px -18px rgba(18, 176, 134, 0.28);

  --container-max: 1200px;
  --content-max: 780px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;
}

/* ---- Dark mode ---- */
:root[data-theme="dark"] {
  --text-primary: var(--text-on-ink);
  --text-secondary: #b6bedb;
  --text-muted: #7c87ab;

  --surface: var(--ink-950);
  --surface-raised: var(--ink-900);
  --surface-sunken: #0e1729;
  --surface-ink: #060b16;
  --surface-ink-raised: #0a1120;

  --line: #24304e;
  --line-strong: #33416a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}