/* ============================================================
   KG3N DYNAMICS — Colors & Type
   Engineering the future. Blueprint navy + electric blue → cyan gradient.
   Paired with DM Sans (display/body) and Space Mono (data, IDs, eyebrows).
   ============================================================ */

/* ---------- Brand Webfonts ---------- */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-normal-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-italic-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/space-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/space-mono-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Brand
     Deep navy ink + electric blue → cyan gradient. Light blueprint
     surfaces. The gradient (accent-start → accent-end) is the
     signature — used on borders, text, and small accents.
     ============================================================ */

  /* Brand core */
  --kg-primary:      #0c1638;   /* primary navy / footer / phone frame */
  --kg-primary-2:    #152046;   /* slightly lifted navy */
  --kg-accent-start: #1d4ed8;   /* electric blue */
  --kg-accent-end:   #06b6d4;   /* cyan */
  --kg-accent-deep:  #7fdfff;   /* highlight cyan (logo glow) */

  /* Surfaces */
  --kg-bg:           #ffffff;   /* primary background */
  --kg-bg-alt:       #f0f7ff;   /* blueprint-tinted surface */
  --kg-surface:      #ffffff;   /* cards */
  --kg-surface-raised: #f6faff; /* raised surface (mix of bg-alt + white) */

  /* Text */
  --kg-text:         #1e3a5f;   /* primary body */
  --kg-text-light:   #4a6d8c;   /* secondary */
  --kg-text-heading: #0c1638;   /* headings */
  --kg-text-on-dark: #ffffff;
  --kg-text-on-dark-mute: #94a3b8;

  /* Borders */
  --kg-border:        #d0e2f0;
  --kg-border-strong: #b3cce0;

  /* Neutrals (cool, blueprint-tinted) */
  --kg-n-50:  #f8fbfe;
  --kg-n-100: #f0f7ff;
  --kg-n-200: #d0e2f0;
  --kg-n-300: #b3cce0;
  --kg-n-400: #94a3b8;
  --kg-n-500: #64748b;
  --kg-n-600: #4a6d8c;
  --kg-n-700: #1e3a5f;
  --kg-n-800: #152046;
  --kg-n-900: #0c1638;

  /* Semantic — Status */
  --kg-success:    #166534;
  --kg-success-bg: #f0fdf4;
  --kg-success-bd: #bbf7d0;
  --kg-warning:    #92400e;
  --kg-warning-bg: #fef3c7;
  --kg-warning-bd: #fde68a;
  --kg-danger:     #991b1b;
  --kg-danger-bg:  #fef2f2;
  --kg-danger-bd:  #fecaca;
  --kg-info:       #1d4ed8;
  --kg-info-bg:    #eff6ff;
  --kg-info-bd:    #bfdbfe;

  /* Foreground / background tokens (semantic aliases) */
  --fg-1: var(--kg-text-heading);
  --fg-2: var(--kg-text);
  --fg-3: var(--kg-text-light);
  --fg-mute: var(--kg-n-400);
  --fg-on-dark: var(--kg-text-on-dark);
  --fg-on-accent: #ffffff;

  --bg-1: var(--kg-bg);
  --bg-2: var(--kg-bg-alt);
  --bg-3: var(--kg-surface-raised);
  --bg-inverse: var(--kg-primary);

  --border-1: var(--kg-border);
  --border-2: var(--kg-border-strong);
  --border-strong: var(--kg-text-heading);

  --accent: var(--kg-accent-start);
  --accent-2: var(--kg-accent-end);
  --accent-press: #1740b8;
  --accent-soft: #eff6ff;

  /* Signature gradient */
  --gradient-accent: linear-gradient(135deg, var(--kg-accent-start), var(--kg-accent-end));
  --gradient-accent-shimmer: linear-gradient(135deg, var(--kg-accent-start) 0%, var(--kg-accent-end) 50%, var(--kg-accent-start) 100%);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
  --font-display: 'DM Sans', ui-sans-serif, system-ui, sans-serif;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* Type scale */
  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 16px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  30px;
  --t-3xl:  38px;
  --t-4xl:  48px;
  --t-5xl:  60px;
  --t-6xl:  76px;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.7;
  --lh-loose: 1.8;

  /* Letter spacing */
  --tr-tight:  -0.03em;
  --tr-snug:   -0.02em;
  --tr-normal: 0;
  --tr-wide:   0.04em;
  --tr-eyebrow: 0.12em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 120px;

  /* ============================================================
     RADII — generous, deep rounded corners (2026 refresh)
     ============================================================ */
  --r-0:    0;
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;
  --r:      22px;   /* default cards */
  --r-lg:   28px;
  --r-xl:   36px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — three-layer for depth
     ============================================================ */
  --sh-sm: 0 1px 2px rgba(12,22,56,.05), 0 2px 6px rgba(12,22,56,.06);
  --sh-1:  0 1px 2px rgba(12,22,56,.05), 0 4px 10px rgba(12,22,56,.06), 0 12px 24px rgba(12,22,56,.05);
  --sh-2:  0 2px 4px rgba(12,22,56,.06), 0 8px 20px rgba(12,22,56,.08), 0 20px 40px rgba(12,22,56,.06);
  --sh-3:  0 4px 8px rgba(12,22,56,.08), 0 16px 32px rgba(12,22,56,.10), 0 32px 64px rgba(12,22,56,.08);
  --sh-glow-accent: 0 0 0 1px rgba(29,78,216,.08), 0 8px 24px rgba(29,78,216,.22);
  --sh-glow-cyan:   0 0 24px rgba(6,182,212,.28);
  --focus-ring:     0 0 0 3px rgba(29,78,216,.28);

  /* Motion */
  --ease-std:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur:      250ms;
  --dur-slow: 450ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.kg-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.kg-h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.kg-h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.kg-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.kg-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--t-md);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.kg-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.kg-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--fg-3);
}

.kg-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: 0.82rem;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.kg-label {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 0.88rem;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.kg-mono {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--fg-3);
  font-feature-settings: "tnum" 1;
}

.kg-data {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: var(--t-base);
  letter-spacing: 0.01em;
  color: var(--fg-1);
  font-feature-settings: "tnum" 1;
}

.kg-quote {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-xl);
  line-height: 1.5;
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

/* Signature gradient text */
.kg-gradient-text {
  background: var(--gradient-accent-shimmer);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  color: var(--kg-text);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}