/* ==========================================================================
   Nexus Webi — Design Tokens
   ========================================================================== */

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

:root {
  /* --- Brand colors ----------------------------------------------------- */
  --nx-blue-900: #0B1F4F;
  --nx-blue-800: #112A66;
  --nx-blue-700: #173494;
  --nx-blue-600: #1E40AF;
  --nx-blue-500: #2563EB;
  --nx-blue-400: #60A5FA;
  --nx-blue-300: #93C5FD;
  --nx-blue-200: #BFDBFE;
  --nx-blue-100: #DBE8FE;
  --nx-blue-50:  #EFF4FE;

  --nx-violet:    #7C5CFF;
  --nx-violet-glow: rgba(124, 92, 255, 0.25);

  --nx-cream:     #F8FAFC;
  --nx-ink:       #0F172A;
  --nx-ink-2:     #334155;
  --nx-ink-3:     #64748B;
  --nx-ink-4:     #94A3B8;
  --nx-line:      rgba(15, 23, 42, 0.08);
  --nx-line-dark: rgba(255, 255, 255, 0.10);
  --nx-white:     #FFFFFF;

  --fg-1: var(--nx-ink);
  --fg-2: var(--nx-ink-2);
  --fg-3: var(--nx-ink-3);
  --fg-on-blue: rgba(255, 255, 255, 0.92);
  --fg-on-blue-2: rgba(255, 255, 255, 0.68);

  --bg-1: var(--nx-white);
  --bg-2: var(--nx-cream);
  --bg-dark: var(--nx-blue-900);

  /* --- Typography ------------------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --text-hero: 64px;       --lh-hero: 1.05;       --ls-hero: -0.025em;
  --text-h1:   48px;       --lh-h1:   1.1;        --ls-h1:   -0.02em;
  --text-h2:   36px;       --lh-h2:   1.15;       --ls-h2:   -0.015em;
  --text-h3:   24px;       --lh-h3:   1.25;       --ls-h3:   -0.01em;
  --text-eyebrow: 13px;    --lh-eyebrow: 1;       --ls-eyebrow: 0.12em;

  --text-xl:    20px;      --lh-xl:   1.5;
  --text-lg:    18px;      --lh-lg:   1.55;
  --text-base:  16px;      --lh-base: 1.6;
  --text-sm:    14px;      --lh-sm:   1.5;
  --text-xs:    12px;      --lh-xs:   1.4;

  /* --- Spacing (4px grid) ----------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* --- Radii ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --- Shadows ---------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(11, 31, 79, 0.05);
  --shadow-sm:   0 2px 8px rgba(11, 31, 79, 0.06);
  --shadow-md:   0 8px 24px rgba(11, 31, 79, 0.08);
  --shadow-lg:   0 24px 64px rgba(11, 31, 79, 0.12);
  --shadow-xl:   0 40px 96px rgba(11, 31, 79, 0.18);
  --shadow-glow: 0 0 80px rgba(124, 92, 255, 0.25);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --gutter: 24px;
  --gutter-lg: 48px;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-1);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }

p { margin: 0; color: var(--fg-2); text-wrap: pretty; }
small { font-size: var(--text-sm); color: var(--fg-3); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }
a { color: var(--nx-blue-500); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--nx-blue-600); }

::selection { background: rgba(37, 99, 235, 0.18); color: var(--nx-ink); }

button { font-family: inherit; }
* { box-sizing: border-box; }