/* ============================================================
   JUNGLE KABAL — COLORS & TYPE TOKENS
   Single source of truth for palette + typography.
   Two color systems cohabitate:
     1. BRAND (from Brand_Art_Direction_v3.md) — used for all
        illustration, marketing, identity assets.
     2. APP / MISSION CONTROL (from codebase) — used for the
        live Kabal A.I. product surface. The app uses a
        slightly more orange-gold (#F5A623) than the brand's
        Kabal Yellow (#FDBB2A); both are canonical within
        their respective contexts.
   ============================================================ */

/* ── Fonts ────────────────────────────────────────────────── */
/* Brand-owned variable fonts (uploaded) */
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Remaining families still pulled from Google Fonts (no local upload yet) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ─── BRAND PALETTE ────────────────────────────────────── */
  /* Primaries — non-negociables (4) */
  --jk-kabal-yellow:   #FDBB2A;  /* Eyes, logo, Œil, Ka, sacred accents */
  --jk-kabalian-brown: #6B461A;  /* Kabalian robe base, earth, organic */
  --jk-void-black:     #20160C;  /* Deep background, outlines, shadows */
  --jk-bone-cream:     #F6ECD2;  /* Light, bone, parchment, clarity */

  /* Elemental accents — one max per composition */
  --jk-el-fire:      #FF4500;
  --jk-el-sky:       #159FEB;
  --jk-el-nature:    #005E36;
  --jk-el-arcane:    #8C4FEB;
  --jk-el-blood:     #D72631;
  --jk-el-gold:      #FDBB2A;
  --jk-el-ice:       #7AC0DA;
  --jk-el-poison:    #77B541;
  --jk-el-shadow:    #3D2B56;
  --jk-el-lightning: #FFD800;
  --jk-el-water:     #2E81A0;
  --jk-el-bone:      #F6ECD2;

  /* ─── APP / MISSION CONTROL PALETTE ────────────────────── */
  /* Gold running scale — the working gold used by JKShell & views */
  --jk-gold:    #F5A623;         /* Primary operational gold */
  --jk-gold-2:  #FFD037;         /* Gold highlight / gradient top */
  --jk-gold-3:  #C88415;         /* Gold shadow / gradient bottom */
  --jk-gold-gradient: linear-gradient(135deg, #FFD037, #F5A623, #C88415);

  /* Surfaces */
  --jk-bg-0:       #050507;      /* Marketing site deep canvas */
  --jk-bg-1:       #0A0A0A;      /* App canvas */
  --jk-bg-2:       #0D0D0D;      /* App surface */
  --jk-bg-3:       rgba(20,20,20,0.85);   /* Card (translucent) */
  --jk-bg-4:       rgba(15,15,15,0.6);    /* Glass card */
  --jk-sidebar:    linear-gradient(180deg, #0D0D0D 0%, #0A0E0A 50%, #0D0D0D 100%);

  /* Borders — almost always gold at low alpha. Tuned 2026-04 (W80):
     border-1 dropped from 8% → 5% so faint dividers stop reading
     as harsh white lines on dark canvas. Card borders (border-2)
     stay at 15% to keep cards visually grouped. */
  --jk-border-1:   rgba(245,166,35,0.05);   /* Faint divider */
  --jk-border-2:   rgba(245,166,35,0.13);   /* Default card border */
  --jk-border-3:   rgba(245,166,35,0.32);   /* Hover / active */
  --jk-border-neutral-1: rgba(255,255,255,0.04);
  --jk-border-neutral-2: rgba(255,255,255,0.06);
  --jk-border-neutral-3: rgba(255,255,255,0.12);

  /* Text */
  --jk-fg-1:    #ffffff;         /* Primary text */
  --jk-fg-2:    #e8e4d9;         /* Marketing body text (bone-tinted) */
  --jk-fg-3:    #cccccc;         /* Secondary */
  --jk-fg-muted:#888888;         /* Muted / meta */
  --jk-fg-dim:  #555555;         /* Dim labels */
  --jk-fg-faint:#333333;         /* Deep dim */

  /* Semantic status */
  --jk-green:    #22C55E;        /* Success, live, PnL positive */
  --jk-red:      #EF4444;        /* Danger, loss, alert */
  --jk-amber:    #F59E0B;        /* Warning, pending */
  --jk-blue:     #3B82F6;        /* Info, build */
  --jk-purple:   #A855F7;        /* Review, arcane */
  --jk-pink:     #EC4899;        /* Content, promotion */
  --jk-cyan:     #06B6D4;        /* Distribution, knowledge */

  /* Agent-family colors (from mission-control/config.js) */
  --jk-family-creation:      #A855F7;
  --jk-family-deploy:        #F59E0B;
  --jk-family-distribution:  #06B6D4;
  --jk-family-trading:       #22C55E;
  --jk-family-promotion:     #EC4899;
  --jk-family-intelligence:  #3B82F6;
  --jk-family-orchestration: #F5A623;
  --jk-family-ops:           #F59E0B;

  /* Glow presets */
  --jk-glow-gold-sm: 0 0 8px rgba(245,166,35,0.40);
  --jk-glow-gold-md: 0 0 40px rgba(245,166,35,0.35);
  --jk-glow-gold-lg: 0 0 80px rgba(245,166,35,0.20);
  --jk-glow-green:   0 0 8px #22C55E;

  /* Elevation / shadow */
  --jk-elev-1: 0 4px 12px rgba(0,0,0,0.35);
  --jk-elev-2: 0 12px 40px rgba(245,166,35,0.08);
  --jk-elev-3: 0 16px 48px rgba(245,166,35,0.15);

  /* Radii */
  --jk-r-sm: 4px;
  --jk-r-md: 8px;
  --jk-r-lg: 14px;
  --jk-r-xl: 20px;
  --jk-r-pill: 999px;

  /* Spacing (4px base) */
  --jk-s-1:  4px;
  --jk-s-2:  8px;
  --jk-s-3:  12px;
  --jk-s-4:  16px;
  --jk-s-5:  20px;
  --jk-s-6:  24px;
  --jk-s-8:  32px;
  --jk-s-10: 40px;
  --jk-s-12: 48px;
  --jk-s-16: 64px;

  /* ─── TYPE FAMILIES ───────────────────────────────────── */
  --jk-font-display:  'Cinzel Decorative', 'Cinzel', serif;  /* Wordmark, biggest stats */
  --jk-font-serif:    'Cinzel', serif;                        /* Headlines, labels, section titles (uppercase + tracked) */
  --jk-font-sans:     'Inter', sans-serif;                    /* App UI body */
  --jk-font-sans-mkt: 'Outfit', sans-serif;                   /* Marketing body + big headlines */
  --jk-font-mono:     'Space Mono', monospace;                /* Marketing labels, tickers, badges */
  --jk-font-code:     'JetBrains Mono', monospace;            /* Code blocks, inline code */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these via class; they encode the voice of the brand.
   Cinzel headlines are ALWAYS uppercase + tracked.
   ============================================================ */

.jk-wordmark {
  font-family: var(--jk-font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--jk-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.05;
}

.jk-h1 {                                   /* Section title, app-side */
  font-family: var(--jk-font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--jk-fg-1);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}
.jk-h2 {                                   /* Subsection */
  font-family: var(--jk-font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--jk-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
}
.jk-h3 {                                   /* Card title */
  font-family: var(--jk-font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--jk-fg-1);
  letter-spacing: 1px;
  line-height: 1.3;
  margin: 0;
}

.jk-eyebrow {                              /* Cinzel tracked micro-label above headings */
  font-family: var(--jk-font-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--jk-gold);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.jk-stat-number {                          /* Big decorative numbers on stat cards */
  font-family: var(--jk-font-display);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--jk-gold);
  letter-spacing: 0.5px;
  line-height: 1;
}

.jk-hero-marketing {                       /* JKHome hero headline */
  font-family: var(--jk-font-sans-mkt);
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 1;
  color: var(--jk-fg-2);
}

.jk-mkt-section {                          /* Marketing section heading */
  font-family: var(--jk-font-sans-mkt);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
}

.jk-body {                                 /* App body */
  font-family: var(--jk-font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--jk-fg-3);
}
.jk-body-mkt {                             /* Marketing body */
  font-family: var(--jk-font-sans-mkt);
  font-size: 14px;
  line-height: 1.75;
  color: #6a6a8a;
}

.jk-mono {                                 /* Marketing mono meta-labels */
  font-family: var(--jk-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--jk-fg-muted);
}
.jk-mono-sm {
  font-family: var(--jk-font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--jk-fg-dim);
}

.jk-code {                                 /* Inline code / command */
  font-family: var(--jk-font-code);
  font-size: 13px;
  font-weight: 600;
  color: var(--jk-gold);
  background: rgba(245,166,35,0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

.jk-meta {                                 /* Tiny uppercased Cinzel label inside cards */
  font-family: var(--jk-font-serif);
  font-size: 9px;
  font-weight: 700;
  color: var(--jk-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Utility text colors ────────────────────────────────── */
.jk-t-gold    { color: var(--jk-gold); }
.jk-t-green   { color: var(--jk-green); }
.jk-t-red     { color: var(--jk-red); }
.jk-t-muted   { color: var(--jk-fg-muted); }
.jk-t-dim     { color: var(--jk-fg-dim); }
.jk-t-cream   { color: var(--jk-bone-cream); }

/* ── Base body reset matching the app ───────────────────── */
.jk-reset,
.jk-reset * { box-sizing: border-box; }
.jk-reset {
  background: var(--jk-bg-1);
  color: var(--jk-fg-1);
  font-family: var(--jk-font-sans);
  -webkit-font-smoothing: antialiased;
}
.jk-reset ::-webkit-scrollbar { width: 4px; height: 4px; }
.jk-reset ::-webkit-scrollbar-track { background: transparent; }
.jk-reset ::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.25); border-radius: 2px; }