/* =============================================================
   JetMarine — Design Tokens
   Single source of truth for palette, typography, spacing,
   radius, shadow, layout and motion variables.
   ============================================================= */

:root {
  /* ── Palette ─────────────────────────────────────────────── */
  --color-navy:       #001B3D;
  --color-ocean:      #0077B6;
  --color-ocean-dark: #005F92;
  --color-sky:        #00B4D8;
  --color-coral:      #FF6B35;
  --color-coral-dark: #E55A27;
  --color-sand:       #F8F9FA;
  --color-white:      #FFFFFF;
  --color-ink:        #0F172A;
  --color-ink-mid:    #334155;
  --color-muted:      #64748B;
  --color-border:     #E2E8F0;
  --color-surface:    #F8FAFB;

  /* ── Status ──────────────────────────────────────────────── */
  --color-success:    #10B981;
  --color-warning:    #F59E0B;
  --color-danger:     #EF4444;
  --color-info:       #3B82F6;

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Outfit', 'Inter', -apple-system, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   clamp(0.7rem,  0.68rem + 0.1vw,  0.75rem);
  --text-sm:   clamp(0.8rem,  0.78rem + 0.1vw,  0.875rem);
  --text-base: clamp(0.9rem,  0.88rem + 0.15vw, 1rem);
  --text-md:   clamp(1rem,    0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.1rem,  1rem    + 0.5vw,  1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem  + 0.75vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,  1.25rem + 1.25vw, 2rem);
  --text-hero: clamp(2.25rem, 1.5rem  + 3.5vw,  4.5rem);

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadow ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --shadow:    0 4px 6px -1px rgba(0, 0, 0, .08),
               0 2px 4px -2px rgba(0, 0, 0, .05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1),
               0 4px  6px  -4px rgba(0, 0, 0, .05);
  --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, .15);

  /* ── Layout ──────────────────────────────────────────────── */
  --nav-height:    64px;
  --sidebar-width: 240px;
  --container:     1200px;

  /* ── Motion ──────────────────────────────────────────────── */
  --dur-fast:   150ms;
  --dur-normal: 280ms;
  --dur-slow:   500ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}