/* ============================================================
   KayaCore Agents — Foundations: Color & Type
   Default theme is DARK ("ink"). Use [data-theme="light"] for
   light content sections. Tokens are split into:
     1. Raw palette (brand primitives — don't use directly in UI)
     2. Semantic tokens (theme-aware — USE THESE)
     3. Type system (font families, scale, semantic roles)
     4. Spacing / radius / shadow / motion
   ============================================================ */

/* Fonts are loaded non-render-blocking via kc-fonts.js (injected after load)
   so previews never hang on a slow/blocked font CDN. Include that script in
   every HTML file. Fallback stacks below keep layout intentional without them. */

:root {
  /* ---------- 1. RAW PALETTE ---------- */

  /* Ink — cool near-black with a faint violet undertone */
  --ink-950: #08070D;
  --ink-900: #0B0A11;   /* primary dark background */
  --ink-850: #100E18;
  --ink-800: #15131F;   /* elevated surface */
  --ink-750: #1A1826;
  --ink-700: #211E2E;   /* raised card on dark */
  --ink-600: #2B2740;   /* border on dark */
  --ink-500: #3A3553;

  /* Paper — cool off-white for light sections */
  --paper-0: #FFFFFF;
  --paper-50: #FBFAFD;  /* primary light background */
  --paper-100: #F4F2F8;
  --paper-200: #ECE9F2;
  --paper-300: #DEDAE8;  /* border on light */

  /* Foreground neutrals (violet-tinted slate) */
  --slate-50: #F6F5FA;
  --slate-200: #C9C5D6;
  --slate-300: #ABA6BC;
  --slate-400: #8A859E;
  --slate-500: #6B6680;
  --slate-600: #524D63;
  --slate-700: #3C3850;
  --slate-900: #16131F;
  --slate-950: #0E0B16;

  /* Violet — signature accent */
  --violet-200: #DDD3FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;  /* accent on dark */
  --violet-600: #7C3AED;  /* accent on light / solid fills */
  --violet-700: #6D28D9;
  --violet-800: #581CB8;

  /* Supporting semantic hues (use sparingly) */
  --mint-400: #34D399;
  --mint-500: #10B981;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --rose-400: #FB7185;
  --rose-500: #F43F5E;
  --sky-400: #38BDF8;

  /* Glow */
  --glow-violet: rgba(139, 92, 246, 0.40);
  --glow-violet-soft: rgba(139, 92, 246, 0.16);

  /* ---------- 2. SEMANTIC TOKENS — DARK (default) ---------- */
  --bg: var(--ink-900);
  --bg-deep: var(--ink-950);
  --surface: var(--ink-800);
  --surface-raised: var(--ink-700);
  --surface-hover: var(--ink-750);
  --border: var(--ink-600);
  --border-soft: rgba(255,255,255,0.07);
  --border-strong: #3A3553;

  --fg: var(--slate-50);
  --fg-muted: var(--slate-300);
  --fg-subtle: var(--slate-400);
  --fg-faint: var(--slate-500);

  --accent: var(--violet-500);
  --accent-hover: var(--violet-400);
  --accent-press: var(--violet-600);
  --accent-fg: #FFFFFF;          /* text/icon on accent fill */
  --accent-tint: rgba(139,92,246,0.12);   /* subtle accent wash */
  --accent-border: rgba(139,92,246,0.38);
  --ring: rgba(139,92,246,0.55);

  --success: var(--mint-400);
  --warning: var(--amber-400);
  --danger: var(--rose-400);
  --info: var(--sky-400);

  /* ---------- 3. TYPE ---------- */
  --font-display: 'Space Grotesk Variable', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Hanken Grotesk Variable', 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* fluid type scale */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1.125rem;    /* 18 */
  --text-lg: 1.3125rem;   /* 21 */
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);     /* 24–30 */
  --text-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);   /* 30–44 */
  --text-3xl: clamp(2.5rem, 1.6rem + 4vw, 4rem);        /* 40–64 */
  --text-4xl: clamp(3rem, 1.8rem + 6vw, 5.5rem);        /* 48–88 */

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.18em;   /* mono eyebrows */

  /* ---------- 4. SPACE / RADIUS / SHADOW / MOTION ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* Elevation — dark uses depth + faint violet bloom */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 24px -8px rgba(0,0,0,0.6);
  --shadow-lg: 0 24px 60px -18px rgba(0,0,0,0.75);
  --shadow-glow: 0 0 0 1px var(--accent-border), 0 12px 40px -10px var(--glow-violet);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* ---------- LIGHT THEME OVERRIDES ---------- */
[data-theme="light"] {
  --bg: var(--paper-50);
  --bg-deep: var(--paper-100);
  --surface: var(--paper-0);
  --surface-raised: var(--paper-0);
  --surface-hover: var(--paper-100);
  --border: var(--paper-300);
  --border-soft: rgba(22,19,31,0.08);
  --border-strong: #CBC5DA;

  --fg: var(--slate-900);
  --fg-muted: var(--slate-600);
  --fg-subtle: var(--slate-500);
  --fg-faint: var(--slate-400);

  --accent: var(--violet-600);
  --accent-hover: var(--violet-700);
  --accent-press: var(--violet-800);
  --accent-fg: #FFFFFF;
  --accent-tint: rgba(124,58,237,0.08);
  --accent-border: rgba(124,58,237,0.28);
  --ring: rgba(124,58,237,0.45);

  --success: var(--mint-500);
  --warning: var(--amber-500);
  --danger: var(--rose-500);

  --shadow-sm: 0 1px 2px rgba(22,19,31,0.06);
  --shadow-md: 0 8px 28px -10px rgba(40,30,70,0.14);
  --shadow-lg: 0 28px 64px -22px rgba(40,30,70,0.22);
  --shadow-glow: 0 0 0 1px var(--accent-border), 0 14px 40px -12px rgba(124,58,237,0.28);
}

/* ============================================================
   SEMANTIC TYPE ROLES — apply to real elements
   ============================================================ */
.kc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.kc-display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.kc-h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.kc-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
  text-wrap: balance;
}
.kc-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}
.kc-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg);
}
.kc-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
}
.kc-lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.kc-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-subtle);
}
.kc-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-muted);
}