/* ============================================================
 * liway design tokens — LOCKED 2026-05-01
 *
 * Single source of truth for the marketing site (liway.app) palette.
 * Web app + mobile app + admin portal stay on their current Tailwind
 * defaults; this is marketing-site-only unless a separate exercise
 * propagates the palette later.
 *
 * Anchor decisions:
 *   - Slate #353e46 + Cream #f9f6f2 are taken from the logo asset
 *     (assets/liway/source/liway-logo-master.svg). These are NOT
 *     up for negotiation — they ARE the brand.
 *   - Slate-950 #1d2126 is added as a deeper anchor for hero
 *     typography and inverted sections; it's "drama," logo-slate
 *     is "chrome."
 *   - Eucalyptus #5d9583 is the accent color, chosen as a midpoint
 *     between sage (#7d9c80, "warm friend") and teal (#5e8a85,
 *     "modern colleague"). Slightly more saturated at the same
 *     lightness — reads as "friendly but sharp."
 *   - Status colors (SAFE/TIGHT/RISK) stay green/amber/red and live
 *     independently of the brand palette.
 *
 * Demographic anchor: 30-45, urban/suburban, paycheck-aware to
 * anxious-aware, smartphone-native, working professional or
 * partnered/family. Aesthetic peers: Mercury, Monarch Money,
 * Notion, Linear.
 * ============================================================ */

:root {
  /* ─── SLATE (chrome + text) ─────────────────────────────── */
  --slate-50:  #f5f3ee;
  --slate-100: #e8e4dc;
  --slate-200: #cbc7be;
  --slate-300: #a3a097;
  --slate-400: #7d7a72;
  --slate-500: #5e5d56;
  --slate-600: #4a4d51;
  --slate-700: #3f444a;
  --slate-800: #353e46;     /* ★ logo-asset anchor — chrome default  */
  --slate-900: #2a3036;
  --slate-950: #1d2126;     /* deepest dark — hero + inverted blocks */

  /* ─── CREAM (page background) ───────────────────────────── */
  --cream-50:  #fdfaf5;
  --cream-100: #f9f6f2;     /* ★ logo-asset anchor — page bg default */
  --cream-200: #f0eae0;
  --cream-300: #e2d8c8;
  --cream-400: #cebda5;
  --cream-500: #b09975;
  --cream-600: #8c7858;
  --cream-700: #695a44;
  --cream-800: #4a4031;
  --cream-900: #332c21;
  --cream-950: #1c1812;

  /* ─── EUCALYPTUS (accent) ──────────────────────────────── */
  --euc-50:  #f0f5f3;
  --euc-100: #dce9e3;
  --euc-200: #bcd4ca;
  --euc-300: #92b8a8;
  --euc-400: #739c8c;
  --euc-500: #5d9583;       /* ★ canonical accent — primary CTA bg   */
  --euc-600: #4d7a6d;
  --euc-700: #3e6157;       /* serious moments — stat-callout numbers, link underlines */
  --euc-800: #304a43;
  --euc-900: #22332f;
  --euc-950: #141d1b;

  /* ─── STATUS (semantic — independent of brand) ─────────── */
  --safe-bg:  #dcfce7;  --safe-fg:  #166534;
  --tight-bg: #fef3c7;  --tight-fg: #92400e;
  --risk-bg:  #fee2e2;  --risk-fg:  #991b1b;

  /* ─── SEMANTIC ROLE ALIASES ────────────────────────────── */
  /* Use these in app code; if the underlying token changes (e.g.
   * we shift slate-800 → slate-700 some day), only the alias
   * needs to update.
   */
  --color-bg:           var(--cream-100);
  --color-bg-subtle:    var(--cream-200);
  --color-bg-card:      var(--cream-50);
  --color-bg-inverted:  var(--slate-950);

  --color-text:         var(--slate-950);   /* hero / strong */
  --color-text-default: var(--slate-700);   /* body */
  --color-text-muted:   var(--slate-500);
  --color-text-on-dark: var(--cream-100);

  --color-border:       var(--cream-300);
  --color-border-strong:var(--slate-200);

  --color-cta-bg:       var(--euc-500);
  --color-cta-fg:       var(--cream-100);
  --color-cta-bg-hover: var(--euc-600);

  --color-accent:       var(--euc-500);
  --color-accent-on-dark: var(--euc-300); /* for highlighted words on slate-950 bg */
  --color-link:         var(--euc-700);
}

/* ============================================================
 * BASE TYPE STACK
 * Sans-serif system stack across the site.
 * ============================================================ */
:where(html) {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-default);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}