/* ============================================================
   CHATBOT KONING — Design Tokens
   Hyper-modern · Dark · Matrix-green · Glass · 3D
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Chakra+Petch:wght@400;500;600;700&display=swap');

:root {
  /* ---------- COLOR · CORE NEUTRALS (Dark first) ---------- */
  --ck-black:        #030604;   /* page background, deepest */
  --ck-ink:          #080d0a;   /* base surface */
  --ck-surface-1:    #0d1410;   /* card */
  --ck-surface-2:    #131c17;   /* raised card / hover */
  --ck-surface-3:    #1a2620;   /* popover / sheet */
  --ck-line:         #1f2d25;   /* hairline borders */
  --ck-line-strong:  #2b3c33;   /* stronger borders */

  /* ---------- COLOR · BRAND (Matrix gradient family) ---------- */
  --ck-acid:         #B8FF6B;   /* lime highlight — wordmark top */
  --ck-lime:         #7CFF4E;   /* primary brand green */
  --ck-green:        #34E067;   /* core matrix green */
  --ck-emerald:      #16A34A;   /* deep green — wordmark base */
  --ck-glow:         #5BFF8E;   /* glow center / neon */
  --ck-glow-soft:    rgba(124, 255, 78, 0.18);

  /* ---------- COLOR · ACCENT SUPPORT ---------- */
  --ck-cyan:         #4DE4D2;   /* accent · used sparingly */
  --ck-amber:        #FFD466;   /* warning */
  --ck-coral:        #FF6F61;   /* error */
  --ck-violet:       #A78BFA;   /* tertiary accent */

  /* ---------- COLOR · TEXT (semantic) ---------- */
  --ck-fg-1:         #F2FFF6;   /* primary text */
  --ck-fg-2:         #C7D6CD;   /* secondary text */
  --ck-fg-3:         #8A9C92;   /* tertiary / meta */
  --ck-fg-4:         #5A6B62;   /* disabled / hint */
  --ck-fg-on-brand:  #052010;   /* text on lime fills */

  /* ---------- COLOR · GRADIENTS ---------- */
  --ck-grad-wordmark: linear-gradient(92deg, #EEFFE0 0%, #B8FF6B 35%, #34E067 70%, #16A34A 100%); /* @kind color */
  --ck-grad-brand:    linear-gradient(135deg, #B8FF6B 0%, #34E067 55%, #16A34A 100%); /* @kind color */
  --ck-grad-glow:     radial-gradient(60% 60% at 50% 50%, rgba(124,255,78,.45) 0%, rgba(124,255,78,0) 70%); /* @kind color */
  --ck-grad-aurora:   radial-gradient(80% 60% at 20% 0%, rgba(124,255,78,.22) 0%, transparent 60%),
                      radial-gradient(60% 50% at 100% 10%, rgba(77,228,210,.14) 0%, transparent 60%),
                      radial-gradient(70% 60% at 50% 110%, rgba(180,255,107,.18) 0%, transparent 60%); /* @kind color */
  --ck-grad-surface:  linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 100%); /* @kind color */
  --ck-grad-hairline: linear-gradient(90deg, transparent, rgba(124,255,78,.5), transparent); /* @kind color */

  /* ---------- GLASS ---------- */
  --ck-glass-bg:        rgba(13, 20, 16, 0.55);
  --ck-glass-bg-strong: rgba(13, 20, 16, 0.78);
  --ck-glass-border:    rgba(255, 255, 255, 0.08);
  --ck-glass-border-hi: rgba(184, 255, 107, 0.22);
  --ck-glass-blur:      blur(22px) saturate(140%); /* @kind other */

  /* ---------- SHADOWS · ELEVATION ---------- */
  --ck-shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --ck-shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px -8px rgba(0,0,0,.7);
  --ck-shadow-3: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -20px rgba(0,0,0,.8);
  --ck-shadow-float: 0 30px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04) inset;

  /* ---------- GLOWS (brand neon) ---------- */
  --ck-glow-sm: 0 0 12px rgba(124,255,78,.45);
  --ck-glow-md: 0 0 24px rgba(124,255,78,.55), 0 0 2px rgba(184,255,107,.7);
  --ck-glow-lg: 0 0 40px rgba(124,255,78,.55), 0 0 80px rgba(52,224,103,.35);
  --ck-glow-ring: 0 0 0 1px rgba(184,255,107,.55), 0 0 24px rgba(124,255,78,.4);

  /* ---------- RADII ---------- */
  --ck-r-xs: 6px;
  --ck-r-sm: 10px;
  --ck-r-md: 14px;
  --ck-r-lg: 20px;
  --ck-r-xl: 28px;
  --ck-r-2xl: 36px;
  --ck-r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --ck-s-1: 4px;
  --ck-s-2: 8px;
  --ck-s-3: 12px;
  --ck-s-4: 16px;
  --ck-s-5: 24px;
  --ck-s-6: 32px;
  --ck-s-7: 48px;
  --ck-s-8: 64px;
  --ck-s-9: 96px;
  --ck-s-10: 128px;

  /* ---------- TYPOGRAPHY · FONT FAMILIES ---------- */
  --ck-font-display: "Chakra Petch", "Space Grotesk", system-ui, sans-serif;
  --ck-font-sans:    "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ck-font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  /* ---------- TYPOGRAPHY · TYPE SCALE ---------- */
  --ck-fs-hero:  clamp(56px, 9vw, 128px); /* @kind font */
  --ck-fs-h1:    clamp(40px, 5vw, 72px);  /* @kind font */
  --ck-fs-h2:    clamp(32px, 3.5vw, 52px); /* @kind font */
  --ck-fs-h3:    28px;
  --ck-fs-h4:    22px;
  --ck-fs-h5:    18px;
  --ck-fs-lead:  20px;
  --ck-fs-body:  16px;
  --ck-fs-sm:    14px;
  --ck-fs-xs:    12px;
  --ck-fs-eyebrow: 12px;

  /* ---------- TYPOGRAPHY · TRACKING ---------- */
  --ck-track-display: -0.02em; /* @kind font */
  --ck-track-body: 0;          /* @kind font */
  --ck-track-eyebrow: 0.18em;  /* @kind font */
  --ck-track-mono: 0.02em;     /* @kind font */

  /* ---------- MOTION ---------- */
  --ck-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --ck-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ck-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ck-dur-fast: 140ms; /* @kind other */
  --ck-dur-med:  280ms; /* @kind other */
  --ck-dur-slow: 520ms; /* @kind other */
}

/* ============================================================
   BASE SEMANTIC ELEMENTS
   ============================================================ */
html, body {
  background: var(--ck-black);
  color: var(--ck-fg-1);
  font-family: var(--ck-font-sans);
  font-size: var(--ck-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .ck-h1 {
  font-family: var(--ck-font-display);
  font-weight: 600;
  font-size: var(--ck-fs-h1);
  line-height: 1.02;
  letter-spacing: var(--ck-track-display);
  margin: 0;
}
h2, .ck-h2 {
  font-family: var(--ck-font-display);
  font-weight: 600;
  font-size: var(--ck-fs-h2);
  line-height: 1.05;
  letter-spacing: var(--ck-track-display);
  margin: 0;
}
h3, .ck-h3 {
  font-family: var(--ck-font-display);
  font-weight: 500;
  font-size: var(--ck-fs-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
h4, .ck-h4 {
  font-family: var(--ck-font-display);
  font-weight: 500;
  font-size: var(--ck-fs-h4);
  line-height: 1.25;
  margin: 0;
}
.ck-hero {
  font-family: var(--ck-font-display);
  font-weight: 600;
  font-size: var(--ck-fs-hero);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.ck-eyebrow {
  font-family: var(--ck-font-mono);
  font-size: var(--ck-fs-eyebrow);
  letter-spacing: var(--ck-track-eyebrow);
  text-transform: uppercase;
  color: var(--ck-lime);
  font-weight: 500;
}
.ck-lead {
  font-size: var(--ck-fs-lead);
  line-height: 1.55;
  color: var(--ck-fg-2);
}
code, .ck-mono {
  font-family: var(--ck-font-mono);
  font-size: 0.92em;
  letter-spacing: var(--ck-track-mono);
}
p, .ck-p {
  margin: 0;
  color: var(--ck-fg-2);
}

/* Text utility: brand gradient text */
.ck-gradient-text {
  background: var(--ck-grad-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}