/* tokens.css — design tokens ported from src/index.css of the Lovable original.
   Deep Navy + Vibrant Orange theme. */
:root {
  /* Surfaces */
  --c-bg:           hsl(0 0% 98%);
  --c-bg-muted:     hsl(220 14% 96%);
  --c-surface:      hsl(0 0% 100%);
  --c-surface-2:    hsl(40 45% 95%);          /* sand */
  --c-border:       hsl(220 13% 91%);
  --c-text:         hsl(222 47% 20%);          /* foreground */
  --c-text-muted:   hsl(220 15% 45%);
  --c-text-soft:    hsl(220 15% 55%);

  /* Brand */
  --c-primary:        hsl(222 60% 28%);        /* navy */
  --c-primary-hover:  hsl(222 65% 22%);        /* navy-dark */
  --c-primary-fg:     hsl(0 0% 100%);

  --c-accent:         hsl(24 90% 55%);         /* orange */
  --c-accent-hover:   hsl(24 85% 48%);         /* orange-dark */
  --c-accent-fg:      hsl(0 0% 100%);

  --c-coral:          hsl(15 85% 55%);
  --c-gold:           hsl(45 90% 50%);
  --c-sand:           hsl(40 45% 95%);
  --c-navy:           hsl(222 60% 28%);
  --c-navy-dark:      hsl(222 65% 22%);
  --c-navy-light:     hsl(222 55% 35%);

  --c-success:        hsl(150 60% 38%);
  --c-warn:           hsl(35 95% 50%);
  --c-error:          hsl(0 84% 60%);

  /* Radii — matches Tailwind --radius: 0.75rem */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* Typography — matches "system + display" stack from tailwind.config */
  --ff-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ff-serif-italic: "Playfair Display", Georgia, serif;
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fz-xs: 12px; --fz-sm: 14px; --fz-md: 16px; --fz-lg: 18px;
  --fz-xl: 22px; --fz-2xl: 28px; --fz-3xl: 36px; --fz-4xl: 48px; --fz-5xl: 60px;
  --lh-tight: 1.1; --lh-normal: 1.55;

  /* Shadows — ported from --shadow-* */
  --sh-soft:  0 4px 20px -5px hsl(222 47% 20% / 0.10);
  --sh-card:  0 10px 40px -10px hsl(222 47% 20% / 0.15);
  --sh-accent:0 10px 30px -5px hsl(24 90% 55% / 0.30);
  --sh-navy:  0 10px 30px -5px hsl(222 60% 28% / 0.30);
  --sh-sm: var(--sh-soft);
  --sh-md: var(--sh-card);
  --sh-lg: var(--sh-navy);

  /* Gradients */
  --g-hero:   linear-gradient(180deg, hsl(222 65% 22%) 0%, hsl(222 60% 28%) 100%);
  --g-orange: linear-gradient(135deg, hsl(24 90% 55%) 0%, hsl(24 85% 48%) 100%);
  --g-navy:   linear-gradient(135deg, hsl(222 60% 28%) 0%, hsl(222 55% 35%) 100%);

  /* Layout */
  --container: 1280px;
  --container-narrow: 860px;
  --header-h: 72px;
  --transition: 180ms ease;
}