/* ==========================================================================
   Family Design System — Core Tokens
   Pixar storyboard on cream paper. Warm fintech.
   ========================================================================== */

/* Webfonts: Fraunces substitutes for the custom 'Family' display typeface;
   Inter for all UI text. SUBSTITUTION — flag to user. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ----- Surfaces & neutrals ----- */
  --color-warm-canvas: #fbfaf9;
  --color-stone-surface: #f2f0ed;
  --color-parchment-card: #f8f7f4;
  --color-graphite: #474645;
  --color-charcoal-primary: #343433;
  --color-midnight: #121212;
  --color-obsidian: #000000;
  --color-ash: #848281;
  --color-fog: #c6c6c6;
  --color-smoke: #a7a7a7;
  --color-pepper: #282624;

  /* ----- Brand chromatic accents (used VERY sparingly in chrome) ----- */
  --color-ember-orange: #ff3e00;       /* primary brand pop — text-link only */
  --color-meadow-green: #00ca48;
  --color-sky-blue: #0090ff;
  --color-sunburst-yellow: #ffbb26;
  --color-deep-amber: #d48f00;
  --color-ocean-blue: #0086fc;
  --color-ice-blue: #64c6ff;
  --color-spearmint: #00c978;

  /* ----- Illustration-only accents (NEVER in UI chrome) ----- */
  --color-flamingo: #ff58ae;
  --color-violet-pop: #9f4fff;
  --color-coral-red: #ff2b3a;
  --color-valid-green: #00c454;

  /* ----- Semantic foreground/background ----- */
  --bg: var(--color-warm-canvas);
  --bg-card: #ffffff;
  --bg-recessed: var(--color-parchment-card);
  --bg-stone: var(--color-stone-surface);
  --bg-dark: var(--color-obsidian);

  --fg: var(--color-graphite);             /* body */
  --fg-strong: var(--color-charcoal-primary);
  --fg-display: var(--color-midnight);
  --fg-muted: var(--color-ash);
  --fg-faint: var(--color-fog);
  --fg-link: var(--color-ember-orange);

  /* ----- Typography families ----- */
  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: var(--font-inter);

  /* ----- Type scale (size / line-height / tracking) ----- */
  --text-caption: 12px;
  --leading-caption: 1.58;
  --tracking-caption: -0.14px;

  --text-body: 15px;
  --leading-body: 1.47;
  --tracking-body: -0.20px;

  --text-body-lg: 17px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.22px;

  --text-heading-sm: 19px;
  --leading-heading-sm: 1.38;
  --tracking-heading-sm: -0.25px;

  --text-heading: 23px;
  --leading-heading: 1.20;
  --tracking-heading: -0.44px;

  --text-heading-lg: 44px;
  --leading-heading-lg: 1.09;
  --tracking-heading-lg: -1.14px;

  --text-display: 68px;
  --leading-display: 1.09;
  --tracking-display: -2.11px;

  /* ----- Weights (max 600 — never go heavier) ----- */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* ----- Spacing (4px base) ----- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-48: 48px;
  --space-60: 60px;
  --space-76: 76px;
  --space-80: 80px;
  --space-92: 92px;
  --space-96: 96px;
  --space-104: 104px;

  /* ----- Radii ----- */
  --radius-tag: 6px;
  --radius-card: 10px;
  --radius-input: 10px;
  --radius-card-lg: 24px;
  --radius-button: 32px;          /* pill */
  --radius-icon: 40px;
  --radius-illustration: 72px;

  /* ----- Shadows ----- */
  --shadow-subtle: rgb(242 240 237) 0 0 0 1px inset;        /* canonical card border */
  --shadow-hairline: rgba(0,0,0,0.04) 0 0 0 1px;            /* nav bar outline */
  --shadow-lg: rgba(0,0,0,0.15) 0 0 24px 0;                 /* dark phone only */
  --shadow-sm: rgba(0,0,0,0.04) 0 1px 6px 0, rgba(0,0,0,0.05) 0 0 24px 0; /* hover lift */

  /* ----- Layout ----- */
  --page-max-width: 1200px;

  /* ----- Motion ----- */
  --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.19, 1, 0.22, 1);
  --dur-micro: 0.2s;
  --dur-entry: 1s;
}

/* ==========================================================================
   Element defaults
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-inter);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: -2.4px;
  color: #121212;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-heading-lg);
  line-height: 1.08;
  letter-spacing: -1.4px;
  color: #121212;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-inter);
  font-weight: var(--w-semibold);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-inter);
  font-weight: var(--w-semibold);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--fg-strong);
  margin: 0;
}

p, .body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  margin: 0;
}

.body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
  color: var(--fg);
}

.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--fg-muted);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: opacity var(--dur-micro) var(--ease-base);
}

a:hover { opacity: 0.75; }

/* ==========================================================================
   Reusable component classes
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: var(--w-medium);
  letter-spacing: -0.18px;
  border-radius: var(--radius-button);
  height: 36px;
  padding: 0 14px;
  border: none;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-base),
              color var(--dur-micro) var(--ease-base),
              opacity var(--dur-micro) var(--ease-base);
  white-space: nowrap;
}

.btn--dark {
  background: var(--color-midnight);
  color: #fff;
}
.btn--dark:hover { background: var(--color-charcoal-primary); }

.btn--light {
  background: #f6f4ef;
  color: var(--color-midnight);
}
.btn--light:hover { background: var(--color-stone-surface); }

.btn--ghost {
  background: transparent;
  color: var(--color-ember-orange);
  border-radius: 0;
  padding: 4px 0;
  height: auto;
}
.btn--ghost:hover { opacity: 0.75; }

.btn--outline {
  background: transparent;
  color: var(--color-graphite);
  border: 1px solid var(--color-graphite);
  border-radius: 12px;
  height: 40px;
  padding: 0 16px;
}

.btn--lg { height: 44px; padding: 0 18px; font-size: 15px; }

.card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: var(--space-32);
  box-shadow: var(--shadow-subtle);
}

.card--recessed {
  background: var(--bg-recessed);
  border-radius: 12px;
  box-shadow: none;
}

.card--dark {
  background: var(--color-obsidian);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-lg);
  color: #fff;
}

/* ==========================================================================
   Utility
   ========================================================================== */

.bg-canvas { background: var(--bg); }
.bg-card { background: var(--bg-card); }
.bg-recessed { background: var(--bg-recessed); }
.bg-stone { background: var(--bg-stone); }
.bg-dark { background: var(--bg-dark); color: #fff; }

.text-display { font-family: var(--font-display); }
.text-link { color: var(--fg-link); }
.text-muted { color: var(--fg-muted); }
.text-strong { color: var(--fg-strong); }