/* ═══════════════════════════════════════════════════════
   SAILSY — DESIGN TOKENS
   Single source of truth for all brand values.
   Update here to propagate across every page.
═══════════════════════════════════════════════════════ */

:root {
  /* ── Accent colours ── */
  --accent:        #00e5ff;
  --accent-blue:   #2979ff;
  --accent-teal:   #00c9a7;
  --accent-deep:   #1a3adb;

  /* ── Gradients ── */
  --gradient:      linear-gradient(135deg, #1a3adb 0%, #2979ff 35%, #00e5ff 70%, #00c9a7 100%);
  --grad-text:     linear-gradient(90deg, #2979ff, #00e5ff, #00c9a7);

  /* ── Backgrounds ── */
  --bg-void:       #070d1a;
  --bg-deep:       #0a1628;
  --bg-card:       rgba(16,28,52,0.55);

  /* ── Text colours ── */
  --text-main:     #e8f4ff;
  --text-muted:    #7f9dbc;
  --text-white:    #ffffff;

  /* ── Borders ── */
  --border-glow:   rgba(0,229,255,0.14);
  --border-bright: rgba(0,229,255,0.38);

  /* ── Radius ── */
  --radius:        16px;

  /* ── Typography — families ── */
  --font-body:     'Outfit', system-ui, -apple-system, sans-serif;
  --font-heading:  'Outfit', system-ui, -apple-system, sans-serif;

  /* ── Typography — sizes ── */
  --text-2xs:  10px;   /* micro labels, tags */
  --text-xs:   11px;   /* eyebrows, nav labels */
  --text-sm:   12px;   /* footer copy, trust bar */
  --text-base: 13px;   /* nav links, captions, card links */
  --text-md:   14px;   /* body copy, buttons */
  --text-lg:   15px;   /* cta button, section descriptions */
  --text-xl:   16px;   /* stat labels */
  --text-2xl:  17px;   /* section subtitles, cap titles */
  --text-3xl:  18px;   /* hero sub, hero value, card names */
  --text-4xl:  20px;   /* card titles, mobile nav */
  --text-5xl:  26px;   /* logo */
  --text-6xl:  28px;   /* stat accent numbers */
  --text-7xl:  56px;   /* hero stat numbers */

  /* ── Typography — weights ── */
  --weight-regular: 400;
  --weight-medium:  600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ── Typography — line heights ── */
  --leading-none:    1;
  --leading-tight:   1.08;   /* hero h1 */
  --leading-snug:    1.15;   /* section h2 */
  --leading-heading: 1.2;    /* card titles */
  --leading-normal:  1.5;    /* list items */
  --leading-relaxed: 1.7;    /* body copy */
  --leading-loose:   1.8;    /* descriptions */

  /* ── Typography — letter spacing ── */
  --tracking-hero:    -0.03em;  /* hero h1 */
  --tracking-heading: -0.02em;  /* display headings */
  --tracking-label:    0.1em;   /* small caps labels */
  --tracking-button:   0.12em;  /* CTAs and buttons */
  --tracking-eyebrow:  0.18em;  /* eyebrows, section labels */
  --tracking-wide:     0.22em;  /* section-eyebrow */

  /* ── Spacing scale (4px grid — N = value ÷ 4) ── */
  --space-1:   4px;   /* micro offsets, bullet positions */
  --space-2:   8px;   /* tight internal gaps */
  --space-3:  12px;   /* small margins */
  --space-4:  16px;   /* component margins, small gaps */
  --space-5:  20px;   /* card/list gaps, eyebrow pill padding */
  --space-6:  24px;   /* medium gaps, trust-item padding */
  --space-7:  28px;   /* card internal padding, method offsets */
  --space-8:  32px;   /* medium-large gaps, container/nav padding */
  --space-9:  36px;   /* item padding, card padding */
  --space-10: 40px;   /* ways-item gap, problems-grid mobile gap */
  --space-11: 44px;   /* hero-sub and cta-sub margin */
  --space-12: 48px;   /* large gaps, section sub-spacing */
  --space-14: 56px;   /* section content lead-in gap */
  --space-15: 60px;   /* footer padding, section-sub margin */
  --space-16: 64px;   /* section content gap, about-grid gap */
  --space-18: 72px;   /* section mobile padding, method-timeline margin */
  --space-20: 80px;   /* band/sub-section padding */

  /* ── Section padding (large layout values) ── */
  --section-pad:      100px;  /* standard section top/bottom padding */
  --section-pad-lg:   110px;  /* expanded sections (capabilities, how-it-works, who-its-for) */
  --section-pad-cta:  120px;  /* CTA section padding */
  --hero-pad-top:     160px;  /* hero section top padding */

  /* ── Sizing ── */
  --sticky-top:  140px;  /* nav clearance for sticky/fixed positioned elements */
  --max-content: 640px;  /* constrained text width (section-sub, cta-content) */
  --max-rail:    780px;  /* wider constrained width (process rail, pills wrap) */
}