/* =========================================================
   ShohozCalculator — Design Tokens
   A financial-ledger visual language: hairline rules instead
   of card shadows, a serif for figures, a grotesque for UI.
   ========================================================= */

:root {
  /* --- Color --- */
  --sc-ink:            #12203A;   /* primary text, brand */
  --sc-ink-soft:       #2B3A54;
  --sc-paper:          #F7F5F0;   /* page background — warm ivory, not cream-cliché */
  --sc-paper-raised:   #FFFFFF;
  --sc-line:           #DCD8CE;   /* hairline rules */
  --sc-line-strong:    #C3BEAF;
  --sc-accent:         #1E6F5C;   /* muted emerald — growth/money, considered not neon */
  --sc-accent-deep:    #154F41;
  --sc-accent-tint:    #E4EFEC;
  --sc-slate:          #5B6472;   /* secondary text */
  --sc-slate-light:    #87909C;
  --sc-warn:           #9C5B2E;   /* flagged/legacy items — clay, not alarm-red */
  --sc-warn-tint:      #F3E7DC;
  --sc-error:          #A6362C;

  /* --- Type --- */
  --sc-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sc-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --sc-size-xs: 0.8125rem;
  --sc-size-sm: 0.9375rem;
  --sc-size-base: 1rem;
  --sc-size-md: 1.125rem;
  --sc-size-lg: 1.375rem;
  --sc-size-xl: 1.75rem;
  --sc-size-2xl: 2.25rem;
  --sc-size-3xl: 3rem;
  --sc-size-4xl: 3.75rem;

  /* --- Space (4px base) --- */
  --sc-space-1: 0.25rem;
  --sc-space-2: 0.5rem;
  --sc-space-3: 0.75rem;
  --sc-space-4: 1rem;
  --sc-space-5: 1.5rem;
  --sc-space-6: 2rem;
  --sc-space-7: 3rem;
  --sc-space-8: 4rem;
  --sc-space-9: 6rem;

  /* --- Layout --- */
  --sc-content-width: 1180px;
  --sc-content-narrow: 760px;
  --sc-radius-sm: 3px;
  --sc-radius-md: 6px;

  /* --- Motion --- */
  --sc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sc-duration: 160ms;
}

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

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sc-font-body);
  font-size: var(--sc-size-base);
  line-height: 1.55;
  color: var(--sc-ink);
  background: var(--sc-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--sc-space-4);
  color: var(--sc-ink);
}

h1 { font-size: var(--sc-size-3xl); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: var(--sc-size-xl); font-weight: 500; }
h3 { font-size: var(--sc-size-md); }
h4 { font-size: var(--sc-size-base); }

p { margin: 0 0 var(--sc-space-4); color: var(--sc-ink-soft); }

a {
  color: var(--sc-accent-deep);
  text-decoration-color: var(--sc-line-strong);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

/* Numerals in a tabular figure style wherever money/results appear */
.sc-figure, .sc-figure * {
  font-variant-numeric: tabular-nums;
}

button, input, select, textarea { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}

img, svg { max-width: 100%; display: block; }

.sc-container {
  width: 100%;
  max-width: var(--sc-content-width);
  margin-inline: auto;
  padding-inline: var(--sc-space-5);
}

.sc-container--narrow { max-width: var(--sc-content-narrow); }
.sc-container--wide-page { max-width: 900px; }

.sc-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.sc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sc-ink);
  color: var(--sc-paper);
  padding: var(--sc-space-3) var(--sc-space-4);
  z-index: 1000;
}
.sc-skip-link:focus { left: var(--sc-space-4); top: var(--sc-space-4); }

@media (max-width: 640px) {
  h1 { font-size: var(--sc-size-2xl); }
  h2 { font-size: var(--sc-size-lg); }
  .sc-container { padding-inline: var(--sc-space-4); }
}