/*
 * base.css — Threshr
 *
 * Design tokens (CSS custom properties), global reset, body typography, and
 * the root layout wrapper. Applies to every page in the project.
 *
 * Do NOT add component or page-specific styles here. Those belong in:
 *   components.css  — shared UI patterns (buttons, cards, forms, modals …)
 *   calculator.css  — calculator page layout and sections
 *   auth.css        — sign-up / sign-in page styles
 *   dashboard.css   — saved-scenarios dashboard styles
 */

/* ─── Design tokens ───────────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --vault:     #FAFAFB;   /* page background — near-white */
  --surface:   #FFFFFF;   /* card surface */
  --surface-2: #F5F4FB;   /* tinted tile / input background */
  --stone:     #F5F4FB;   /* alias for --surface-2 */

  /* Text */
  --ink:           #1A1726;  /* near-black */
  --plaster:       #1A1726;  /* alias for --ink */
  --text-primary:  #1A1726;
  --text-secondary:#6E6A85;
  --text-tertiary: #9C99B0;

  /* Accent */
  --accent:       #5A43D9;  /* deep indigo — primary brand colour */
  --accent-press: #4A35BE;  /* accent on active/press */
  --accent-soft:  #ECE9FB;  /* very light tint for hover backgrounds */
  --rose:         #5A43D9;  /* legacy alias kept for any inline JS references */
  --gold:         #5A43D9;  /* legacy alias kept for any inline JS references */

  /* Semantic colours */
  --green:      #15A06B;
  --amber:      #E08A1E;
  --red:        #E23D4C;
  --smoke:      #6E6A85;
  --terracotta: #8B4513;

  /* Borders */
  --border:        #E8E6F0;
  --border-strong: #D8D5E6;
}

/* ─── Global reset ────────────────────────────────────────────────────────── */

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

/* ─── Body / typography ───────────────────────────────────────────────────── */

body {
  background: var(--vault);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Root layout wrapper ─────────────────────────────────────────────────── */

.wrap {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

@media (min-width: 1024px) {
  .wrap { max-width: 1080px; }
}

@media (max-width: 480px) {
  .wrap { padding: 1.75rem 1rem 3rem; }
}