/* =============================================================
   PilotID Design Tokens — colors, type, spacing, elevation
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* -----------------------------------------------------------
     PRIMARY BRAND
     ----------------------------------------------------------- */
  --passport-blue:   #0D2A4A;   /* core brand: logo, primary actions, identity */
  --signal-teal:     #0BB7A7;   /* confirmation, verified pills, energetic CTA */

  /* -----------------------------------------------------------
     ACCENTS
     ----------------------------------------------------------- */
  --runway-amber:    #F5A623;   /* warnings, pending, upcoming, milestone badges */
  --beacon-red:      #E13D4A;   /* errors, destructive, critical alerts */
  --skyline-indigo:  #394B7D;   /* hover, secondary buttons, tabs, charts */

  /* -----------------------------------------------------------
     NEUTRALS
     ----------------------------------------------------------- */
  --night-slate:     #050814;   /* primary app bg, hero, dark mode floor */
  --panel-charcoal:  #151923;   /* card / panel / nav surface in dark UI */
  --flight-gray:     #353A44;   /* secondary text, icons, dividers on dark */
  --cloud-light:     #E3E7EE;   /* light bg, table rows, gridlines */
  --paper-white:     #F8FAFD;   /* highest-contrast light bg, forms, print */

  /* -----------------------------------------------------------
     EXTENDED TINTS (derived; keep harmonious)
     ----------------------------------------------------------- */
  --passport-blue-100: #E6EBF2;
  --passport-blue-200: #B8C5D8;
  --passport-blue-300: #6F84A8;
  --passport-blue-400: #2F4D77;
  --passport-blue-500: var(--passport-blue);
  --passport-blue-600: #0A2140;
  --passport-blue-700: #061732;

  --teal-100: #D5F4F1;
  --teal-200: #8EE2DA;
  --teal-300: #3DCABB;
  --teal-400: var(--signal-teal);
  --teal-500: #0A9D8F;
  --teal-600: #087A6F;

  --amber-100: #FCEBC9;
  --amber-200: #F8CC85;
  --amber-300: var(--runway-amber);
  --amber-400: #D78A12;

  --red-100: #FAD7DA;
  --red-200: #F08891;
  --red-300: var(--beacon-red);
  --red-400: #B82B36;

  --indigo-100: #DCE1F0;
  --indigo-200: #8E9CC4;
  --indigo-300: #5E72A6;
  --indigo-400: var(--skyline-indigo);
  --indigo-500: #2C3A60;

  /* Dark-surface layered tints */
  --surface-0: var(--night-slate);
  --surface-1: var(--panel-charcoal);
  --surface-2: #1B202D;
  --surface-3: #232938;
  --hairline:  #232838;        /* 1px dividers on dark */
  --hairline-strong: #2C3344;

  /* -----------------------------------------------------------
     SEMANTIC TOKENS — DARK (default)
     ----------------------------------------------------------- */
  --bg:        var(--night-slate);
  --bg-elev-1: var(--panel-charcoal);
  --bg-elev-2: var(--surface-2);
  --bg-elev-3: var(--surface-3);

  --fg:        var(--paper-white);   /* primary text on dark */
  --fg-muted:  var(--cloud-light);   /* secondary text */
  --fg-dim:    #8A92A3;              /* tertiary / metadata */
  --fg-faint:  var(--flight-gray);   /* disabled / placeholder */

  --border:    var(--hairline);
  --border-strong: var(--hairline-strong);
  --focus-ring: var(--signal-teal);

  --link:        var(--teal-300);
  --link-hover:  var(--signal-teal);

  --status-verified:  var(--signal-teal);
  --status-pending:   var(--runway-amber);
  --status-error:     var(--beacon-red);
  --status-info:      var(--skyline-indigo);
  --status-neutral:   var(--flight-gray);

  /* -----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------- */
  --font-display: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem-based, 16px root) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;   /* eyebrows, uppercase labels */

  /* -----------------------------------------------------------
     SPACING (4px base)
     ----------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* -----------------------------------------------------------
     RADII
     ----------------------------------------------------------- */
  --radius-xs: 2px;     /* hairline pills, ticks */
  --radius-sm: 4px;     /* inputs, small chips */
  --radius-md: 6px;     /* default cards, buttons */
  --radius-lg: 10px;    /* large panels */
  --radius-xl: 16px;    /* hero surfaces */
  --radius-pill: 999px; /* status pills, segmented */

  /* -----------------------------------------------------------
     ELEVATION (use sparingly — interface is mostly flat)
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.02) inset;
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03) inset;
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  --shadow-glow-teal: 0 0 0 1px rgba(11,183,167,0.5), 0 0 24px rgba(11,183,167,0.25);
  --shadow-glow-amber: 0 0 0 1px rgba(245,166,35,0.5), 0 0 24px rgba(245,166,35,0.2);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   260ms;

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --content-max: 1240px;
  --gutter:      24px;
  --nav-h:       56px;
  --sidebar-w:   240px;
}

/* -----------------------------------------------------------
   LIGHT MODE OVERRIDES
   ----------------------------------------------------------- */
:root[data-theme="light"],
.theme-light {
  --bg:        var(--paper-white);
  --bg-elev-1: #FFFFFF;
  --bg-elev-2: var(--cloud-light);
  --bg-elev-3: #D6DCE5;

  --fg:        var(--passport-blue-700);
  --fg-muted:  #2A3344;
  --fg-dim:    #5B647A;
  --fg-faint:  #99A1B3;

  --border:        #DDE3EC;
  --border-strong: #C2CAD8;

  --link:        var(--passport-blue);
  --link-hover:  var(--skyline-indigo);

  --shadow-xs: 0 1px 0 rgba(13,42,74,0.05);
  --shadow-sm: 0 1px 2px rgba(13,42,74,0.08);
  --shadow-md: 0 4px 12px rgba(13,42,74,0.10);
  --shadow-lg: 0 12px 32px rgba(13,42,74,0.14);
}

/* =============================================================
   ELEMENT BASELINES
   ============================================================= */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4) 0;
  font-weight: 600;
}

/* Semantic type scale */
.t-display    { font-family: var(--font-display); font-size: var(--fs-64); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.t-h1, h1     { font-family: var(--font-display); font-size: var(--fs-48); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.t-h2, h2     { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); }
.t-h3, h3     { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 600; line-height: var(--lh-snug); }
.t-h4, h4     { font-family: var(--font-display); font-size: var(--fs-20); font-weight: 600; line-height: var(--lh-snug); }
.t-h5, h5     { font-family: var(--font-display); font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-snug); }

.t-body-lg    { font-size: var(--fs-18); line-height: var(--lh-relaxed); }
.t-body, p    { font-size: var(--fs-15); line-height: var(--lh-normal); margin: 0 0 var(--space-3) 0; }
.t-body-sm    { font-size: var(--fs-13); line-height: var(--lh-normal); }
.t-caption    { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg-dim); }

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.t-mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

::selection { background: var(--signal-teal); color: var(--night-slate); }