/* =====================================================================
   BALEN — design tokens (canonical, session 11)
   =====================================================================
   Single source of truth for the premium teal palette + typography +
   shape tokens used by the onboarding wizard and JIT bottom sheets.
   The same values are also inlined in app.html's <style> block so the
   page works without a separate stylesheet load; this file is the
   reviewable artifact.
   ===================================================================== */

:root {
  /* ---------- Premium Teal palette ----------------------------------- */
  --teal-25:  #F4FAF8;
  --teal-50:  #E1F5EE;
  --teal-500: #4CC9BD;
  --teal-600: #0F6E56;
  --teal-700: #1FA3A3;
  --teal-800: #127C82;
  --teal-900: #0C5A63;
  --teal-950: #04342C;

  /* ---------- Ink (text + neutral fills) ----------------------------- */
  --ink-200: #D3D1C7;
  --ink-500: #888780;
  --ink-700: #5F5E5A;
  --ink-900: #0B1622;

  /* ---------- Accent pairs (icon foreground / background) ----------- */
  --accent-blue:        #2D6FE8;
  --accent-blue-bg:     #E6F1FB;
  --accent-amber:       #854F0B;
  --accent-amber-bg:    #FAEEDA;
  --accent-rose:        #993556;
  --accent-rose-bg:     #FBEAF0;
  --accent-violet:      #534AB7;
  --accent-violet-bg:   #EEEDFE;
  --accent-stone:       #5F5E5A;
  --accent-stone-bg:    #F1EFE8;

  /* ---------- The Cockpit gradient ----------------------------------- */
  --cockpit-gradient: linear-gradient(
    135deg,
    #0C5A63 0%,
    #127C82 40%,
    #1FA3A3 70%,
    #4CC9BD 100%
  );
  --cockpit-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -30px 60px rgba(0, 0, 0, 0.18);

  /* ---------- Typography stacks (system, no Google Fonts) ----------- */
  --font-serif: 'Times New Roman', Georgia, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                'Segoe UI', Roboto, sans-serif;
  --font-mono:  'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', monospace;

  /* ---------- Letter-spacing scale ----------------------------------- */
  --tracking-headline-lg: -0.02em;   /* 28px+ */
  --tracking-headline-md: -0.01em;
  --tracking-mono:         0.05em;
  --tracking-eyebrow:      0.22em;   /* uppercase 9-11px labels */

  /* ---------- Radius scale ------------------------------------------ */
  --radius-input:    14px;
  --radius-button:   16px;
  --radius-card:     20px;
  --radius-card-lg:  28px;
  --radius-pill:    100px;

  /* ---------- Heights ----------------------------------------------- */
  --btn-h-primary:   56px;
  --btn-h-secondary: 48px;
}