/* ==========================================================================
   DESIGN TOKENS — TrueCalc
   Light theme throughout. Brass + chalk-line blue carry the brand identity
   as accents against a warm paper surface; graphite is reserved for text
   and the one dark instrument element (the results readout), not used as
   page-level chrome. Verified-formula positioning stays in copy/badges
   rather than in a dark "hero band" treatment.
   ========================================================================== */

:root {
  /* ---- Color: paper + graphite ink + brass + chalk-line blue ---- */
  --color-paper:          #F7F5EF;   /* page background */
  --color-paper-raised:   #FFFFFF;   /* cards, header, footer */
  --color-paper-sunken:   #EFECE2;   /* subtle recessed panels (hero, hub banner) */
  --color-ink:            #23262B;   /* body text */
  --color-ink-soft:       #565C55;
  --color-ink-faint:      #8B8F86;
  --color-line:           #E3DFD1;
  --color-line-strong:    #C9C4B2;

  --color-brass:          #A97A3E;   /* primary accent */
  --color-brass-bright:   #C6924F;
  --color-brass-deep:     #7A5726;   /* accessible-on-white brass for links/text */
  --color-brass-ink:      #40300F;   /* text-on-brass (buttons) */
  --color-brass-soft:     #F3E7D4;   /* tint background */
  --color-chalk:          #235A6D;   /* links, secondary actions */
  --color-chalk-soft:     #E4EEF1;
  --color-red:            #A63A31;
  --color-red-soft:       #F8E9E7;
  --color-green:          #3E6644;
  --color-green-soft:     #E9F0E7;

  /* readout panel — the one deliberately dark element on the page,
     styled like a lit instrument dial, not page chrome */
  --color-readout-bg:     #1D2024;
  --color-readout-fg:     #F3EFE3;
  --color-readout-sub:    #96A199;

  /* ---- Type ---- */
  --font-display: "Archivo Expanded", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  2.875rem;

  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* ---- Space (4px base) ---- */
  --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: 6rem;

  /* ---- Shape ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* ---- Layout ---- */
  --content-width: 780px;
  --wide-width: 1120px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-med: 320ms;

  /* ---- Legacy alias tokens (kept so component CSS written against
     earlier passes still resolves correctly) ---- */
  --color-amber:        var(--color-brass);
  --color-amber-bright: var(--color-brass-bright);
  --color-amber-ink:    var(--color-brass-ink);
  --color-steel:        var(--color-chalk);
  --color-steel-soft:   var(--color-chalk-soft);
  --color-graphite:      var(--color-paper-raised);
  --color-on-graphite:      var(--color-ink);
  --color-on-graphite-soft: var(--color-ink-soft);
}