/* =============================================================
 * Mindful Balance — Foundations
 * Colors + Typography tokens. Import this in any prototype.
 * ============================================================= */

/* Roboto — local font files in /fonts. Four weights used across the
   system: 400 (body), 500 (medium / buttons), 600 (h1), 700 (display).
   Italic faces are bundled for body emphasis. Extra weights / condensed
   variants exist in /fonts and can be loaded on demand. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Roboto-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Roboto-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Roboto-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Roboto-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Roboto-MediumItalic.ttf') format('truetype');
}

:root {
  /* ---------- COLORS · raw palette ---------- */
  --warm-chalk:        #FBF9F6;   /* surface primary */
  --sand-pebble:       #EFECE6;   /* surface secondary */
  --soft-charcoal:     #2D2B2A;   /* text primary */
  --sage-green:        #A3B19B;   /* brand primary — Budget Safe */
  --muted-terracotta:  #D9A080;   /* brand accent  — Spend / Urge */
  --soft-ochre:        #E3C16F;   /* brand reward  — Milestone */

  /* Derived neutrals (kept warm — never use pure grays) */
  --ink-700: #2D2B2A;
  --ink-500: #5B5754;
  --ink-300: #8E8A85;
  --ink-200: #BFB9B1;
  --ink-100: #DDD8D0;
  --hairline: rgba(45, 43, 42, 0.08);

  /* Derived brand tints (for backgrounds / chips / fills) */
  --sage-tint:        #E6EBE2;
  --sage-deep:        #6F8067;
  --terracotta-tint:  #F4DFD0;
  --terracotta-deep:  #B5704F;
  --ochre-tint:       #F4E6BD;
  --ochre-deep:       #A88638;

  /* ---------- COLORS · semantic ---------- */
  --surface-primary:    var(--warm-chalk);
  --surface-secondary:  var(--sand-pebble);
  --surface-raised:     #FFFFFF;
  --surface-sunken:     #E8E4DC;

  --text-primary:    var(--soft-charcoal);
  --text-secondary:  var(--ink-500);
  --text-muted:      var(--ink-300);
  --text-on-brand:   #FBF9F6;

  --brand-primary:   var(--sage-green);
  --brand-accent:    var(--muted-terracotta);
  --brand-reward:    var(--soft-ochre);

  --safe:    var(--sage-green);
  --urge:    var(--muted-terracotta);
  --reward:  var(--soft-ochre);

  --border-soft:    rgba(45, 43, 42, 0.08);
  --border-default: rgba(45, 43, 42, 0.14);
  --border-strong:  rgba(45, 43, 42, 0.24);

  /* ---------- TYPE · families ---------- */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- TYPE · scale (raw) ---------- */
  --fs-display: 32px;   --lh-display: 38px;   --fw-display: 700;
  --fs-h1:      24px;   --lh-h1:      32px;   --fw-h1:      600;
  --fs-h2:      18px;   --lh-h2:      26px;   --fw-h2:      500;
  --fs-body:    15px;   --lh-body:    22px;   --fw-body:    400;
  --fs-body-m:  15px;   --lh-body-m:  22px;   --fw-body-m:  500;
  --fs-caption: 12px;   --lh-caption: 16px;   --fw-caption: 400;

  /* ---------- SPACING (4pt grid) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---------- RADII ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, warm, low-glare) ---------- */
  --shadow-sm: 0 1px 2px rgba(45, 43, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 43, 42, 0.08), 0 1px 2px rgba(45,43,42,0.04);
  --shadow-lg: 0 12px 32px rgba(45, 43, 42, 0.12), 0 2px 6px rgba(45,43,42,0.05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* ---------- TYPE · semantic ---------- */
body, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  color: var(--text-primary);
  background: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  color: var(--text-primary);
}

.body-medium {
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  font-weight: var(--fw-body-m);
  color: var(--text-primary);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-caption);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* ---------- Utility helpers ---------- */
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.safe { color: var(--sage-deep); }
.urge { color: var(--terracotta-deep); }
.reward { color: var(--ochre-deep); }