/* ================================================================
   Design Tokens — Linear/Attio/Vercel aesthetic
   Navy primary · Orange accent (CTAs only) · Border-based layout
   ================================================================ */
:root {
  /* ── Navy palette ── */
  --navy-900: #0A1628;
  --navy-800: #0E2644;
  --navy-700: #153A66;
  --navy-500: #0E4D92;

  /* ── Orange accent (use sparingly — CTAs, icons, kickers) ── */
  --orange-600: #E5551A;
  --orange-500: #FF6B1A;
  --orange-400: #FF8547;

  /* ── Surfaces ── */
  --surface-white: #FFFFFF;
  --surface-50:    #F9FAFB;
  --surface-100:   #F5F7FA;

  /* ── Borders ── */
  --border-light:  #E5E7EB;
  --border-medium: #D1D5DB;
  --border-dark:   rgba(255,255,255,0.10);

  /* ── Text ── */
  --text-900: #0F172A;
  --text-600: #475569;
  --text-400: #94A3B8;
  --text-inverse: #FFFFFF;

  /* ── Legacy aliases (keep for template compatibility) ── */
  --color-bg:             var(--surface-white);
  --color-bg-alt:         var(--surface-50);
  --color-bg-dark:        var(--navy-900);
  --color-bg-dark-alt:    var(--navy-800);
  --color-surface:        var(--surface-white);
  --color-surface-hover:  var(--surface-50);
  --color-text:           var(--text-900);
  --color-text-secondary: var(--text-600);
  --color-text-muted:     var(--text-400);
  --color-text-inverse:   var(--text-inverse);
  --color-accent:         var(--orange-500);
  --color-accent-hover:   var(--orange-600);
  --color-accent-light:   rgba(255,107,26,0.08);
  --color-border:         var(--border-light);
  --color-border-dark:    var(--border-dark);
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;

  /* ── Typography ── */
  --font-family:         'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Fluid type scale */
  --font-xs:   clamp(.75rem, .7rem + .25vw, .8125rem);    /* 12-13px */
  --font-sm:   clamp(.8125rem, .78rem + .2vw, .875rem);   /* 13-14px */
  --font-base: clamp(.9375rem, .88rem + .3vw, 1rem);      /* 15-16px */
  --font-md:   clamp(1rem, .93rem + .35vw, 1.125rem);     /* 16-18px */
  --font-lg:   clamp(1.125rem, 1rem + .55vw, 1.25rem);    /* 18-20px */
  --font-xl:   clamp(1.25rem, 1.1rem + .8vw, 1.5rem);     /* 20-24px */
  --font-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);       /* 24-32px */
  --font-3xl:  clamp(2rem, 1.5rem + 2.5vw, 3rem);         /* 32-48px */
  --font-4xl:  clamp(2.5rem, 1.8rem + 3.5vw, 4rem);       /* 40-64px */
  --font-5xl:  clamp(3rem, 2rem + 5vw, 5rem);             /* 48-80px */

  /* ── Spacing (8px base unit) ── */
  --space-1:  .25rem;   /*  4px */
  --space-2:  .5rem;    /*  8px */
  --space-3:  .75rem;   /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  --section-padding: clamp(5rem, 4rem + 5vw, 10rem);

  /* ── Layout ── */
  --container-max:    1280px;
  --container-wide:   1400px;
  --container-narrow: 720px;
  --header-height:    72px;

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows — minimal, border-first design ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.08);

  /* ── Gradients ── */
  --gradient-navy:    linear-gradient(180deg, var(--navy-900) 0%, #020617 100%);
  --gradient-navy-glow: radial-gradient(ellipse at 70% 100%, rgba(255,107,26,.07) 0%, transparent 60%);

  /* Feature icon backgrounds (lighter, matches new palette) */
  --icon-bg-1: #FFF4EE;
  --icon-bg-2: #EFF6FF;
  --icon-bg-3: #FFFBEB;
  --icon-bg-4: #EEF2FF;
  --icon-bg-5: #F0FDF4;
  --icon-bg-6: #F5F3FF;

  --icon-color-1: var(--orange-500);
  --icon-color-2: var(--navy-500);
  --icon-color-3: #D97706;
  --icon-color-4: #4F46E5;
  --icon-color-5: #16A34A;
  --icon-color-6: #7C3AED;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
}