/* ============================================================
   PILOT SYSTEMS AI - DESIGN TOKENS
   Single source of truth for all colors, fonts, and spacing.
   Edit here to change globally.
   ============================================================ */

:root {

  /* ── BRAND COLORS ────────────────────────────────────────── */
  --color-primary:        #4F7FE8;   /* Cornflower blue – core brand */
  --color-primary-dark:   #3366CC;   /* Hover / pressed */
  --color-primary-light:  #E8EFFD;   /* Tint surface */

  --color-accent:         #F97316;   /* Warm orange – primary CTA */
  --color-accent-dark:    #EA6A05;   /* CTA hover */
  --color-accent-light:   #FEF0E7;   /* Accent tint */

  /* ── BACKGROUNDS ─────────────────────────────────────────── */
  --color-bg-white:       #FFFFFF;
  --color-bg-light:       #F7F8FC;   /* Off-white body sections */
  --color-bg-surface:     #EFF3FD;   /* Subtle blue-tint card surface */
  --color-bg-dark:        #0B0E18;   /* Near-black – dark sections */
  --color-bg-dark-2:      #111827;   /* Secondary dark surface */
  --color-bg-dark-border: #1E2535;   /* Border on dark sections */

  /* ── TEXT ────────────────────────────────────────────────── */
  --color-text-primary:     #0B0E18;
  --color-text-secondary:   #374151;
  --color-text-muted:       #6B7280;
  --color-text-placeholder: #9CA3AF;
  --color-text-on-dark:     #F7F8FC;
  --color-text-on-dark-2:   #D1D5DB;
  --color-text-on-dark-muted: #9CA3AF;

  /* ── BORDERS ─────────────────────────────────────────────── */
  --color-border:           #E5E7EB;
  --color-border-dark:      #1E2535;

  /* ── SEMANTIC ────────────────────────────────────────────── */
  --color-star:             #F59E0B;   /* Star rating gold */
  --color-success:          #10B981;

  /* ── FONTS ───────────────────────────────────────────────── */
  --font-heading: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* ── TYPE SCALE ──────────────────────────────────────────── */
  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.875rem;    /* 14px */
  --text-base:  1rem;        /* 16px */
  --text-lg:    1.125rem;    /* 18px */
  --text-xl:    1.25rem;     /* 20px */
  --text-2xl:   1.5rem;      /* 24px */
  --text-3xl:   1.875rem;    /* 30px */
  --text-4xl:   2.25rem;     /* 36px */
  --text-5xl:   3rem;        /* 48px */
  --text-6xl:   3.75rem;     /* 60px */
  --text-7xl:   4.5rem;      /* 72px */
  --text-8xl:   6rem;        /* 96px */

  /* ── FONT WEIGHTS ────────────────────────────────────────── */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ── LINE HEIGHTS ────────────────────────────────────────── */
  --leading-none:     1;
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.8;

  /* ── LETTER SPACING ──────────────────────────────────────── */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.015em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.15em;

  /* ── SPACING ─────────────────────────────────────────────── */
  --space-1:    0.25rem;    /*  4px */
  --space-2:    0.5rem;     /*  8px */
  --space-3:    0.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 */

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --container-max:  1280px;
  --container-md:   900px;
  --container-sm:   640px;
  --nav-height:     100px;

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-full:  9999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-blue:  0 4px 20px rgba(79, 127, 232, 0.2);
  --shadow-card:  0 2px 12px rgba(11, 14, 24, 0.06), 0 1px 3px rgba(11, 14, 24, 0.04);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-nav:       200;
  --z-modal:     300;
  --z-toast:     400;
}