/* This file is generated by scripts/sync-brand-assets.mjs. Do not edit directly. */
:root {
  /* Canvas */
  --bg: #f6f4e8;
  --surface: #faf9f4;
  --surface-strong: #ffffff;

  /* Brand accents */
  --primary: #0e8170;
  --primary-hover: #086154;
  --primary-pressed: #054a3e;
  --secondary: #adc8bf;
  --accent: #ff8f47;
  --accent-soft: #ffe5d0;
  --pastel-yellow: #fde47a;

  /* Ink */
  --text: #152420;
  --text-soft: #3e4d47;
  --text-faint: #6a7a74;
  --text-inverted: #f8faf8;

  /* Borders */
  --border: #d8d6be;
  --border-strong: #c4c3ab;

  /* Legacy glass (kept for marketing dark hero) */
  --glass: rgba(253, 247, 230, 0.72);
  --glass-strong: rgba(255, 253, 240, 0.9);
  --overlay: rgba(14, 30, 24, 0.55);

  /* Material surface colors */
  --frost-glass: rgba(249, 252, 255, 0.60);
  --frost-glass-soft: rgba(251, 253, 255, 0.56);
  --frost-menu: rgba(252, 254, 255, 0.96);
  --warm-ambient: rgba(255, 143, 71, 0.12);
  --cool-shadow: rgba(14, 60, 100, 0.08);

  /* Status */
  --success: #2f9c5a;
  --success-surface: #e8f4ed;
  --success-text: #225f3f;
  --warning: #c77f22;
  --warning-surface: #fff4df;
  --warning-text: #8f5b16;
  --error: #d85f3c;
  --error-surface: #fce8e2;
  --error-text: #9d3f25;

  /* Legacy shadow aliases (deprecated — prefer --elevation-* ) */
  --shadow-soft: 0 14px 36px rgba(19, 28, 24, 0.11);
  --shadow-card: 0 18px 42px rgba(18, 29, 24, 0.10);
  --shadow-raised: 0 24px 48px rgba(18, 29, 24, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.66);

  /* Tier elevations */
  --elevation-t0: 0 1px 2px rgba(20, 30, 25, 0.03);
  --elevation-t1: 0 2px 4px rgba(20, 30, 25, 0.04), 0 8px 14px rgba(20, 30, 25, 0.06);
  --elevation-t1-hover: 0 4px 8px rgba(20, 30, 25, 0.05), 0 12px 22px rgba(20, 30, 25, 0.07), 0 20px 36px rgba(20, 30, 25, 0.06);
  --elevation-t2: 0 4px 8px rgba(20, 30, 25, 0.05), 0 12px 22px rgba(20, 30, 25, 0.07), 0 20px 36px rgba(20, 30, 25, 0.06);
  --elevation-t3: 0 8px 16px rgba(20, 30, 25, 0.08), 0 24px 44px rgba(20, 30, 25, 0.10), 0 40px 68px rgba(20, 30, 25, 0.09);
  --elevation-t3-hover: 0 10px 20px rgba(20, 30, 25, 0.10), 0 30px 54px rgba(20, 30, 25, 0.13), 0 48px 80px rgba(20, 30, 25, 0.10);
  --elevation-t3-warm: 0 32px 60px rgba(255, 143, 71, 0.12), 0 0 40px rgba(255, 143, 71, 0.10);
  --elevation-t3-warm-hover: 0 40px 72px rgba(255, 143, 71, 0.18), 0 0 48px rgba(255, 143, 71, 0.14);
  --elevation-hairline: 0 0 0 0.5px rgba(20, 30, 25, 0.05);
  --elevation-hairline-soft: 0 0 0 0.5px rgba(20, 30, 25, 0.04);
  --button-shadow: 0 2px 4px rgba(20, 30, 25, 0.05), 0 8px 16px rgba(20, 30, 25, 0.07);
  --button-shadow-hover: 0 4px 8px rgba(20, 30, 25, 0.06), 0 14px 28px rgba(20, 30, 25, 0.08);
  --button-shadow-teal: 0 2px 4px rgba(14, 129, 112, 0.18), 0 8px 16px rgba(14, 129, 112, 0.14);
  --button-shadow-teal-hover: 0 4px 8px rgba(14, 129, 112, 0.22), 0 14px 28px rgba(14, 129, 112, 0.18);

  /* Radii / sizes */
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --container: 1160px;

  /* Typography */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-data: 'Geist Mono', monospace;

  /* Canvas gradients */
  --gradient-page: radial-gradient(860px 600px at 4% -8%, rgba(173, 200, 191, 0.60) 0%, transparent 62%), radial-gradient(740px 540px at 96% 6%, rgba(14, 129, 112, 0.24) 0%, transparent 58%), radial-gradient(820px 600px at 72% 108%, rgba(255, 143, 71, 0.26) 0%, transparent 62%), radial-gradient(660px 480px at 36% 44%, rgba(253, 228, 122, 0.32) 0%, transparent 55%), radial-gradient(540px 420px at 14% 72%, rgba(255, 209, 198, 0.48) 0%, transparent 60%), radial-gradient(520px 380px at 92% 74%, rgba(210, 232, 221, 0.50) 0%, transparent 60%), #f6f4e8;
  --gradient-page-soft: radial-gradient(860px 600px at 4% -8%, rgba(173, 200, 191, 0.42) 0%, transparent 62%), radial-gradient(740px 540px at 96% 6%, rgba(14, 129, 112, 0.14) 0%, transparent 58%), radial-gradient(820px 600px at 72% 108%, rgba(255, 143, 71, 0.14) 0%, transparent 62%), radial-gradient(660px 480px at 36% 44%, rgba(253, 228, 122, 0.20) 0%, transparent 55%), radial-gradient(540px 420px at 14% 72%, rgba(255, 209, 198, 0.32) 0%, transparent 60%), radial-gradient(520px 380px at 92% 74%, rgba(210, 232, 221, 0.34) 0%, transparent 60%), #f7f5ec;
  --gradient-card: linear-gradient(160deg, rgba(251, 253, 255, 0.56) 0%, rgba(251, 253, 255, 0.52) 100%);
  --gradient-card-soft: linear-gradient(160deg, rgba(251, 253, 255, 0.56) 0%, rgba(251, 253, 255, 0.52) 100%);

  /* Material gradients */
  --gradient-liquid-refraction: linear-gradient(160deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.42) 42%, rgba(255, 255, 255, 0.26) 80%, rgba(240, 248, 255, 0.18) 100%);
  --gradient-chromatic: linear-gradient(90deg, transparent 0%, rgba(255, 180, 220, 0.26) 22%, rgba(255, 255, 255, 0.78) 50%, rgba(180, 220, 255, 0.26) 78%, transparent 100%);
  --gradient-specular: linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.14) 54%, transparent 66%);

  /* Grains */
  --grain-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.50'/></svg>");
  --grain-halftone-10: radial-gradient(circle, rgba(20, 30, 25, 0.12) 1.2px, transparent 1.5px);

  /* Interactions */
  --easing-base: cubic-bezier(0.22, 0.82, 0.22, 1);
  --easing-fast: cubic-bezier(0.4, 0, 0.2, 1);
  --timing-base: 240ms;
  --timing-hover: 280ms;
  --timing-press: 90ms;
  --press-scale-button: scale(0.97);
  --press-scale-hero: scale(0.96);

  /* Charts */
  --chart-current: #0e8170;
  --chart-comparison: #ff8f47;
  --chart-grid: #d8dddb;
  --chart-savings: #2f9c5a;
  --chart-increase: #d85f3c;
}

html {
  color-scheme: light;
}

body {
  color: var(--text);
  font-family: var(--font-body);
  background-color: var(--bg);
}