/* ============================================================
   VAYTRION DESIGN SYSTEM — Core Tokens
   Parent: Vaytrion  ·  Product: Aegis Graph
   A Wiz-inspired optimistic security aesthetic.
   ============================================================ */

/* ---- Fonts (Google Fonts substitutions — flagged in README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — PRIMITIVES
     ============================================================ */

  /* Brand core — Vaytrion "Shield Blue" */
  --brand-50:  #EEF2FF;
  --brand-100: #DCE3FF;
  --brand-200: #B6C4FF;
  --brand-300: #8199FF;
  --brand-400: #5A74FF;
  --brand-500: #3A55F2;   /* Vaytrion primary */
  --brand-600: #2F44D6;
  --brand-700: #2436A8;
  --brand-800: #1B2878;
  --brand-900: #121B52;

  /* Aegis accent — "Graph Violet" (pairs with brand blue in the same
     way Wiz pairs royal-blue with magenta/pink — optimism + energy). */
  --accent-50:  #FBEEFF;
  --accent-100: #F3D8FF;
  --accent-300: #D89CFF;
  --accent-500: #B45EFF;   /* Aegis accent */
  --accent-600: #9B3FEA;
  --accent-700: #7A2BC2;

  /* Signal pink — for callouts, pills, energetic bursts */
  --pink-500:   #FF4D8D;
  --pink-400:   #FF7FAE;
  --pink-100:   #FFD6E4;

  /* Neutrals — warm-cool ebony, Wiz-like */
  --ink-0:   #FFFFFF;
  --ink-25:  #FAFBFC;
  --ink-50:  #F4F6F9;
  --ink-100: #E8ECF2;
  --ink-200: #D3DAE3;
  --ink-300: #AEB7C5;
  --ink-400: #7C8797;
  --ink-500: #545F71;
  --ink-600: #384253;
  --ink-700: #232C3D;
  --ink-800: #141A29;
  --ink-900: #0B1020;  /* Ebony — primary dark bg */
  --ink-950: #050814;

  /* Semantic */
  --green-500: #22C483;
  --green-100: #CFF4E0;
  --amber-500: #F5A524;
  --amber-100: #FCE8C6;
  --red-500:   #F4484B;
  --red-100:   #FCD9DA;
  --cyan-500:  #36C5F0;
  --cyan-100:  #CDEEFB;

  /* ============================================================
     COLOR — SEMANTIC
     ============================================================ */
  --bg:            var(--ink-0);
  --bg-subtle:     var(--ink-25);
  --bg-muted:      var(--ink-50);
  --bg-inverse:    var(--ink-900);
  --bg-inverse-2:  var(--ink-800);

  --surface:       var(--ink-0);
  --surface-raised: var(--ink-0);
  --surface-sunken: var(--ink-50);
  --surface-inverse: var(--ink-800);

  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --border-inverse: rgba(255,255,255,0.08);

  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-400);
  --fg-inverse:    var(--ink-0);
  --fg-inverse-muted: rgba(255,255,255,0.66);
  --fg-brand:      var(--brand-600);
  --fg-accent:     var(--accent-600);

  --focus-ring:    0 0 0 3px rgba(58,85,242,0.35);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — tight vertical rhythm */
  --fs-12: 12px;  --lh-12: 16px;
  --fs-13: 13px;  --lh-13: 18px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-15: 15px;  --lh-15: 22px;
  --fs-16: 16px;  --lh-16: 24px;
  --fs-18: 18px;  --lh-18: 28px;
  --fs-20: 20px;  --lh-20: 30px;
  --fs-24: 24px;  --lh-24: 32px;
  --fs-30: 30px;  --lh-30: 38px;
  --fs-36: 36px;  --lh-36: 44px;
  --fs-48: 48px;  --lh-48: 54px;
  --fs-64: 64px;  --lh-64: 68px;
  --fs-80: 80px;  --lh-80: 82px;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.16em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0:  0;
  --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;
  --space-32: 128px;

  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOW / ELEVATION
     ============================================================ */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.06);
  --shadow-lg:  0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
  --shadow-xl:  0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --shadow-glow: 0 0 0 1px rgba(58,85,242,0.15), 0 10px 30px -8px rgba(58,85,242,0.35);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* Layout */
  --container:   1200px;
  --container-wide: 1360px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 80px);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  color: var(--fg);
}
.ds-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-48); line-height: var(--lh-48);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg);
}
.ds-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-36); line-height: var(--lh-36);
  letter-spacing: var(--tracking-snug);
  font-weight: 700;
  color: var(--fg);
}
.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-24); line-height: var(--lh-24);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  color: var(--fg);
}
.ds-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-18); line-height: var(--lh-18);
  font-weight: 600;
  color: var(--fg);
}
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-16); line-height: var(--lh-16);
  color: var(--fg);
}
.ds-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-18); line-height: var(--lh-18);
  color: var(--fg-muted);
}
.ds-small {
  font-family: var(--font-sans);
  font-size: var(--fs-14); line-height: var(--lh-14);
  color: var(--fg-muted);
}
.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12); line-height: var(--lh-12);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}
.ds-code {
  font-family: var(--font-mono);
  font-size: var(--fs-14); line-height: var(--lh-14);
  color: var(--fg);
}
.ds-num {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.95;
  color: var(--fg);
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   UTILITY
   ============================================================ */
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
a { color: inherit; }
.ds-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.ds-container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; }

/* Grid noise + mesh helpers used across marketing surfaces */
.ds-mesh {
  background:
    radial-gradient(60% 80% at 20% 10%, rgba(180,94,255,0.22) 0%, transparent 60%),
    radial-gradient(50% 70% at 90% 20%, rgba(58,85,242,0.28) 0%, transparent 60%),
    radial-gradient(45% 60% at 70% 90%, rgba(255,77,141,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #0B1020 0%, #050814 100%);
}
.ds-grid-lines {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}