/* ============================================================
   JET.AI — Colors & Type Tokens
   NASDAQ: JTAI · AI data-center infrastructure + private aviation
   Load AFTER fonts.css. All tokens live on :root.
   ============================================================ */

:root{
  /* ---------- BRAND / NAVY (primary) ---------------------- */
  --navy-50:  #f1f4f9;
  --navy-100: #dde4ef;
  --navy-200: #b9c6dd;
  --navy-300: #8098c0;
  --navy-400: #4a6aa3;
  --navy-500: #284a85;
  --navy-600: #1c3360;   /* ◆ BRAND NAVY — the JET wordmark */
  --navy-700: #18305a;
  --navy-800: #12264a;
  --navy-900: #0b1a36;
  --navy-950: #070e1e;

  /* ---------- AZURE (digital / interactive accent) -------- */
  --azure-300: #8fb6f2;
  --azure-400: #5690ea;
  --azure-500: #2e6ce0;   /* links, focus, active product UI */
  --azure-600: #2058c4;
  --azure-700: #1846a0;

  /* ---------- GOLD (premium / aviation accent) ------------ */
  --gold-300: #e0cca0;
  --gold-400: #d2b888;
  --gold-500: #c2a36b;    /* jet card, premium tier, sparing use */
  --gold-600: #a8884f;

  /* ---------- NEUTRALS (cool-tinted) ---------------------- */
  --white:    #ffffff;
  --gray-50:  #f7f8fa;
  --gray-100: #eef1f5;
  --gray-200: #e2e7ee;
  --gray-300: #cbd2dc;
  --gray-400: #9aa4b2;
  --gray-500: #6b7685;
  --gray-600: #4b5563;
  --gray-700: #353d49;
  --gray-800: #20262f;
  --gray-900: #12161c;
  --gray-950: #0a0d11;

  /* ---------- SEMANTIC STATUS ----------------------------- */
  --success: #1e8a5b;  --success-bg: #e6f4ed;
  --warning: #b9831a;  --warning-bg: #fbf1dc;
  --error:   #c2453b;  --error-bg:   #fbe9e7;
  --info:    var(--azure-500); --info-bg: #e7f0fd;

  /* ---------- SEMANTIC SURFACES & TEXT (light) ------------ */
  --bg:        var(--white);
  --bg-subtle: var(--gray-50);
  --bg-muted:  var(--gray-100);
  --surface:   var(--white);
  --surface-raised: var(--white);
  --bg-inverse: var(--navy-900);

  --fg:        #0f141b;          /* primary text */
  --fg-2:      var(--gray-600);  /* secondary text */
  --fg-3:      var(--gray-500);  /* tertiary / captions */
  --fg-on-dark:#eef2f8;
  --fg-on-dark-2:#a9b6cc;
  --link:      var(--azure-600);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-inverse: rgba(255,255,255,.14);
  --ring: color-mix(in srgb, var(--azure-500) 45%, transparent);

  /* ---------- TYPE FAMILIES ------------------------------- */
  --font-display: "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- TYPE SCALE (px) ----------------------------- */
  --fs-display-2xl: 72px;  --lh-display-2xl: 1.02;
  --fs-display-xl:  56px;  --lh-display-xl:  1.05;
  --fs-display-lg:  44px;  --lh-display-lg:  1.08;
  --fs-h1: 36px;  --lh-h1: 1.12;
  --fs-h2: 28px;  --lh-h2: 1.18;
  --fs-h3: 22px;  --lh-h3: 1.25;
  --fs-h4: 18px;  --lh-h4: 1.35;
  --fs-body-lg: 18px; --lh-body-lg: 1.6;
  --fs-body:    16px; --lh-body:    1.6;
  --fs-sm:      14px; --lh-sm:      1.55;
  --fs-caption: 13px; --lh-caption: 1.45;
  --fs-eyebrow: 12px; --lh-eyebrow: 1.2;
  --fs-micro:   11px; --lh-micro:   1.3;

  /* ---------- WEIGHTS & TRACKING -------------------------- */
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;
  --track-display: -0.02em;
  --track-tight:   -0.01em;
  --track-eyebrow:  0.16em;
  --track-mono:     0.02em;

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

  /* ---------- RADII --------------------------------------- */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:9999px;

  /* ---------- ELEVATION (cool navy-tinted shadows) -------- */
  --shadow-xs: 0 1px 2px rgba(11,26,54,.06);
  --shadow-sm: 0 1px 3px rgba(11,26,54,.08), 0 1px 2px rgba(11,26,54,.06);
  --shadow-md: 0 4px 12px rgba(11,26,54,.10), 0 2px 4px rgba(11,26,54,.06);
  --shadow-lg: 0 12px 28px rgba(11,26,54,.14), 0 4px 8px rgba(11,26,54,.06);
  --shadow-xl: 0 24px 56px rgba(11,26,54,.20), 0 8px 16px rgba(11,26,54,.08);

  /* ---------- MOTION -------------------------------------- */
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:360ms;
  --container: 1200px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt in with class .jet-prose,
   or copy these rules into product CSS.
   ============================================================ */
.jet-prose, .jet-type{ font-family:var(--font-sans); color:var(--fg); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

.display-2xl{font-family:var(--font-display);font-weight:var(--w-semibold);font-size:var(--fs-display-2xl);line-height:var(--lh-display-2xl);letter-spacing:var(--track-display);}
.display-xl {font-family:var(--font-display);font-weight:var(--w-semibold);font-size:var(--fs-display-xl); line-height:var(--lh-display-xl); letter-spacing:var(--track-display);}
.display-lg {font-family:var(--font-display);font-weight:var(--w-semibold);font-size:var(--fs-display-lg); line-height:var(--lh-display-lg); letter-spacing:var(--track-display);}

h1,.h1{font-family:var(--font-display);font-weight:var(--w-semibold);font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--track-tight);}
h2,.h2{font-family:var(--font-display);font-weight:var(--w-semibold);font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--track-tight);}
h3,.h3{font-family:var(--font-display);font-weight:var(--w-medium);font-size:var(--fs-h3);line-height:var(--lh-h3);}
h4,.h4{font-family:var(--font-sans);font-weight:var(--w-semibold);font-size:var(--fs-h4);line-height:var(--lh-h4);}

.body-lg{font-family:var(--font-sans);font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);}
p,.body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);}
.text-sm{font-size:var(--fs-sm);line-height:var(--lh-sm);}
.caption{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--fg-3);}

.eyebrow,.overline{font-family:var(--font-mono);font-weight:var(--w-medium);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--azure-600);}
.mono,code,kbd{font-family:var(--font-mono);font-size:.92em;letter-spacing:var(--track-mono);}
.stat{font-family:var(--font-display);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;letter-spacing:var(--track-tight);}

a,.link{color:var(--link);text-decoration:none;}
a:hover,.link:hover{text-decoration:underline;text-underline-offset:2px;}