/* ==================================================================
   CLOVED / BOS — Design Tokens
   Glassmorphism + Pastel Light / Neon Cyberpunk Dark
   All color vars are HSL (space-separated) so hsl()/hsla() can wrap.
   ==================================================================

   Source of truth: agiens/vbp-german @ vbp-mvp_v2 / src/index.css
   Fonts are loaded via Google Fonts CDN in index.html:
     Play, PT Sans, Orbitron, Russo One, IBM Plex Sans
*/

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Orbitron:wght@400;700;900&family=PT+Sans:wght@400;700&family=Play:wght@400;700&family=Russo+One&display=swap');

:root {
  /* =============== TYPOGRAPHY =============== */

  /* Body / UI — neutral humanist sans with good readability */
  --font-sans: 'IBM Plex Sans', 'PT Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Display / headings — techy geometric for hero moments */
  --font-display: 'Orbitron', 'Play', ui-sans-serif, system-ui, sans-serif;

  /* Alt display / branding — punchy condensed headline */
  --font-brand: 'Russo One', 'Orbitron', ui-sans-serif, sans-serif;

  /* Reading body (marketing / long copy) */
  --font-body: 'PT Sans', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;

  /* Mono — code blocks, terminal, KBD */
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Type scale (clamped for responsive) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   36px;
  --fs-4xl:   48px;
  --fs-5xl:   60px;
  --fs-6xl:   72px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:  0.04em;
  --tracking-widest: 0.12em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   900;

  /* =============== COLORS — LIGHT (Pastel) =============== */

  --background: 0 0% 99%;
  --foreground: 230 15% 18%;

  --card: 0 0% 100%;
  --card-foreground: 230 15% 18%;

  --popover: 0 0% 100%;
  --popover-foreground: 230 15% 18%;

  /* Pastel blue primary */
  --primary: 210 80% 68%;
  --primary-foreground: 0 0% 100%;

  /* Pastel pink secondary */
  --secondary: 330 60% 90%;
  --secondary-foreground: 330 40% 35%;

  --muted: 220 20% 96%;
  --muted-foreground: 220 10% 50%;

  --accent: 330 70% 76%;
  --accent-foreground: 330 60% 20%;

  --destructive: 0 72% 62%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 20% 90%;
  --input: 220 20% 90%;
  --ring: 210 80% 68%;

  --radius: 0.875rem;        /* 14px — card default */
  --radius-sm: 0.5rem;       /*  8px */
  --radius-md: 0.75rem;      /* 12px */
  --radius-lg: 1rem;         /* 16px — card-lg */
  --radius-xl: 1.25rem;      /* 20px */
  --radius-2xl: 1.5rem;      /* 24px — hero */
  --radius-full: 9999px;

  /* Sidebar */
  --sidebar-background: 210 40% 98%;
  --sidebar-foreground: 220 10% 40%;
  --sidebar-primary: 210 80% 68%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 330 60% 94%;
  --sidebar-accent-foreground: 330 40% 30%;
  --sidebar-border: 220 20% 92%;
  --sidebar-ring: 210 80% 68%;

  /* Pastel palette (brand-direct tokens) */
  --pastel-blue:     210 80% 68%;
  --pastel-pink:     330 70% 76%;
  --pastel-peach:     30 80% 80%;
  --pastel-lavender: 270 60% 78%;
  --pastel-mint:     160 50% 75%;

  /* Glass */
  --glass-bg: 0 0% 100% / 0.6;
  --glass-border: 220 20% 88%;
  --glass-shadow: 210 40% 70%;
  --glass-blur: 16px;

  /* Semantic */
  --success: 160 60% 52%;
  --success-foreground: 0 0% 100%;
  --warning: 38 90% 62%;
  --warning-foreground: 38 80% 18%;
  --info: 210 80% 62%;
  --info-foreground: 0 0% 100%;

  /* Spacing scale (Tailwind-aligned, in rem) */
  --space-0: 0;
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */

  /* Shadow system (light) */
  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.04);
  --shadow-md: 0 4px 16px -2px hsl(210 40% 70% / 0.08);
  --shadow-lg: 0 8px 32px -8px hsl(0 0% 0% / 0.10);
  --shadow-glass-btn: 0 4px 16px -2px hsl(var(--primary) / 0.25);
  --shadow-card: 0 4px 24px -4px hsl(0 0% 0% / 0.08);
  --shadow-card-hover: 0 8px 32px -4px hsl(0 0% 0% / 0.12);
}

.dark {
  /* =============== COLORS — DARK (Neon Cyberpunk) =============== */
  --background: 230 20% 7%;
  --foreground: 210 20% 95%;

  --card: 230 18% 10%;
  --card-foreground: 210 20% 95%;

  --popover: 230 18% 10%;
  --popover-foreground: 210 20% 95%;

  /* Neon cyan primary */
  --primary: 190 100% 55%;
  --primary-foreground: 230 20% 5%;

  --secondary: 270 50% 20%;
  --secondary-foreground: 270 80% 85%;

  --muted: 230 15% 14%;
  --muted-foreground: 220 10% 55%;

  /* Neon pink accent */
  --accent: 330 90% 65%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 80% 55%;
  --destructive-foreground: 0 0% 100%;

  --border: 230 15% 16%;
  --input: 230 15% 16%;
  --ring: 190 100% 55%;

  --sidebar-background: 230 18% 9%;
  --sidebar-foreground: 220 10% 55%;
  --sidebar-primary: 190 100% 55%;
  --sidebar-primary-foreground: 230 20% 5%;
  --sidebar-accent: 270 40% 18%;
  --sidebar-accent-foreground: 270 80% 85%;
  --sidebar-border: 230 15% 14%;
  --sidebar-ring: 190 100% 55%;

  /* Neon palette (brand-direct tokens) */
  --neon-cyan:   190 100% 55%;
  --neon-pink:   330  90% 65%;
  --neon-purple: 270  80% 65%;
  --neon-green:  150  90% 50%;
  --neon-orange:  25  95% 58%;

  /* Glass */
  --glass-bg: 230 18% 12% / 0.5;
  --glass-border: 230 15% 20%;
  --glass-shadow: 190 100% 55%;
  --glass-blur: 20px;

  --success: 150 90% 50%;
  --success-foreground: 0 0% 5%;
  --warning: 38 95% 55%;
  --warning-foreground: 38 90% 10%;
  --info: 190 100% 55%;
  --info-foreground: 0 0% 5%;

  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
  --shadow-md: 0 4px 16px -2px hsl(0 0% 0% / 0.35);
  --shadow-lg: 0 8px 40px -8px hsl(0 0% 0% / 0.4);
  --shadow-glass-btn: 0 4px 16px -2px hsl(var(--primary) / 0.35);
  --shadow-card: 0 4px 32px -4px hsl(0 0% 0% / 0.35);
  --shadow-card-hover: 0 8px 40px -4px hsl(0 0% 0% / 0.40);
}

/* =============== SEMANTIC TYPE CLASSES =============== */

html, body { font-family: var(--font-sans); color: hsl(var(--foreground)); background: hsl(var(--background)); }

/* Hero / big display */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(48px, 7vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* H1 */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(36px, 5vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* H2 */
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.5vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

/* H3 */
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

/* H4 — section / card title */
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

/* Body */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: hsl(var(--foreground));
}

/* Long-form reading (marketing) */
.prose-body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: hsl(var(--foreground));
}

.small, small { font-size: var(--fs-sm); color: hsl(var(--muted-foreground)); }
.xs          { font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); }

/* Eyebrow / kicker label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* Code / mono */
code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: hsl(var(--muted));
  padding: 0.15em 0.35em;
  border-radius: var(--radius-sm);
}

/* Neon-style brand moment (used on landing hero) */
.brand-neon {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: hsl(var(--primary));
  text-shadow:
    0 0 8px hsl(var(--primary) / 0.55),
    0 0 20px hsl(var(--primary) / 0.25);
}

/* ---------- Neuron Chat tokens (synced 2026-06-10 from src/index.css) ---------- */
:root {
  /* Surface palette */
  --bg:        #0a0b0e;
  --bg-2:      #0e0f13;
  --surface-0: #131520;
  --surface-1: #181a26;
  --surface-2: #1f222f;
  --surface-3: #272a39;
  --hover:     #232636;
  --line:      #1e2030;
  --line-2:    #262a3a;
  --line-3:    #353a4d;

  /* Foreground ramp */
  --fg:    #ecedf3;
  --fg-2:  #b8bcc9;
  --fg-3:  #7d8294;
  --fg-4:  #555a6c;
  --fg-5:  #3a3e4f;

  /* Brand neuron-cyan */
  --neuron:        #4adcff;
  --neuron-2:      #2ec1eb;
  --neuron-soft:   rgba(74,220,255,.10);
  --neuron-line:   rgba(74,220,255,.28);
  --neuron-glow:   rgba(74,220,255,.55);

  /* Per-tone base hues */
  --t-think:   #4adcff;
  --t-read:    #ffb547;
  --t-edit:    #ff7ad9;
  --t-bash:    #5ef0a3;
  --t-agent:   #b388ff;
  --t-search:  #ffd95e;
  --t-web:     #6cc7ff;
  --t-lsp:     #c5e26d;
  --t-plan:    #f59ec3;
  --t-error:   #ff5a5a;
  --t-warn:    #ffb547;

  /* Per-tone soft fills */
  --t-think-soft: rgba(74,220,255,.10);
  --t-read-soft:  rgba(255,181,71,.10);
  --t-edit-soft:  rgba(255,122,217,.10);
  --t-bash-soft:  rgba(94,240,163,.10);
  --t-agent-soft: rgba(179,136,255,.12);

  /* Per-tone hairlines */
  --t-think-line: rgba(74,220,255,.28);
  --t-read-line:  rgba(255,181,71,.28);
  --t-edit-line:  rgba(255,122,217,.30);
  --t-bash-line:  rgba(94,240,163,.30);
  --t-agent-line: rgba(179,136,255,.32);

  /* Status aliases */
  --error: var(--t-error);
  --warn:  var(--t-warn);

  /* Typography (handoff fonts; both families loaded via Google Fonts in index.html) */
  --mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}