/* ============================================================
   Swellmail design tokens — navy/postal-red "airmail" palette.
   Sourced from the Swellmail Design System on claude.ai/design.
   Standalone token layer; reused by the marketing site today and
   intended for reuse on the app side (see ticket app-ddwg).
   Fonts are loaded separately (see the page's Google Fonts <link>).
   ============================================================ */
:root {
  /* --- Navy (brand / primary) --- */
  --navy-50:  #ECF1F9;
  --navy-100: #D8E3F1;
  --navy-200: #B2C6E2;
  --navy-300: #88A4CE;
  --navy-400: #5A7DB0;
  --navy-500: #2F5793;  /* brand navy */
  --navy-600: #20467E;  /* primary actions */
  --navy-700: #193A66;
  --navy-900: #11294A;  /* deepest navy */

  /* --- Ink (cool near-black — text & dark surfaces) --- */
  --ink-900: #1A1E2B;
  --ink-700: #353B4A;
  --ink-500: #5C6374;
  --ink-400: #8A91A1;
  --ink-300: #B8BDC9;

  /* --- Cream (warm paper accents) --- */
  --cream-100: #F6EFE0;
  --cream-200: #EADFC4;

  /* --- Postal red (accent / the "ding" & deals) --- */
  --post-400: #E25A60;
  --post-500: #D2353C;
  --post-600: #B0262D;

  /* --- Surfaces & lines --- */
  --paper:     #FBF6EC;
  --surface:   #FFFFFF;
  --surface-2: #FBF8F2;
  --line:      #ECE4D4;
  --line-strong: #DCD2BE;

  /* --- Semantic: clutter / chaos (the "before" state) --- */
  --clutter-500: #7C8597;
  --clutter-100: #E7EAEF;

  /* --- Semantic: success / saved --- */
  --success-500: #3F8F5F;
  --success-100: #DCEDE2;

  /* --- Semantic aliases --- */
  --bg-page:        var(--paper);
  --bg-surface:     var(--surface);
  --bg-surface-alt: var(--surface-2);
  --bg-tint:        var(--navy-50);
  --bg-warm:        var(--cream-100);
  --bg-ink:         var(--ink-900);

  --text-strong:    var(--ink-900);
  --text-heading:   var(--ink-700);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-ink:    #F2EEE4;
  --text-on-brand:  #FFFFFF;

  --brand:          var(--navy-500);
  --brand-strong:   var(--navy-600);
  --accent:         var(--post-500);

  --border:         var(--line);
  --border-strong:  var(--line-strong);

  --focus-ring:     color-mix(in srgb, var(--navy-600) 45%, transparent);

  /* --- Typography --- */
  --font-display: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-lead: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-label: 0.14em;

  /* --- Spacing (4px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-y: clamp(64px, 8vw, 128px);
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 48px);

  /* --- Radii --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(26, 30, 43, 0.05);
  --shadow-sm: 0 2px 8px rgba(26, 30, 43, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 30, 43, 0.08);
  --shadow-lg: 0 18px 48px rgba(26, 30, 43, 0.10);
  --shadow-xl: 0 32px 70px rgba(26, 30, 43, 0.14);
  --shadow-ding: 0 12px 30px rgba(210, 53, 60, 0.26);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}