/* =====================================================================
   COHERENCE — Colors & Type
   ---------------------------------------------------------------------
   Source of truth, lifted verbatim from the Coherence codebase:
     - src/theme/index.ts        (Colors, FlowColors, Fonts, Spacing, Radii, Shadows)
     - src/theme/semantic.ts     (DarkTheme / LightTheme semantic tokens)
     - src/styles/tokens.css     (canvas + radius tokens)
     - src/App.css               (shell chrome, panels, buttons)

   Coherence ships a DARK shell by default (deep indigo glass), with a
   light theme available. The product accent is electric lime (#CDF545)
   for brand moments and cobalt blue (#4A7CF7) as the working UI accent.
   ===================================================================== */

/* ---- Fonts -----------------------------------------------------------
   Loaded from Google Fonts (the repo references these families by name
   but ships no bundled font files — see README "Font substitution").
   Space Grotesk + IBM Plex Sans = display/titles. Inter = body/UI.
   IBM Plex Mono / SF Mono = code & numerics. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== BRAND PALETTE (theme/index.ts → Colors) ===== */
  --c-primary-green: #002918;   /* deep brand green — marketing surfaces, logo */
  --c-electric-green: #CDF545;  /* electric lime — signature brand accent */

  --c-white: #FFFFFF;
  --c-lightest-grey: #F9F9F9;
  --c-light-grey: #E8E8E8;
  --c-silver: #C2C2C2;
  --c-ash: #757575;
  --c-metal: #494948;
  --c-black: #121111;

  --c-green-1: #FBFFF3;
  --c-green-4: #4C8D36;
  --c-green-5: #00331D;
  --c-blue-1: #ECF2FF;
  --c-blue-4: #143FB2;
  --c-red-1: #FFF1F1;
  --c-red-4: #F02C2C;
  --c-yellow-1: #FFFBE8;
  --c-yellow-4: #FFD600;
  --c-purple-1: #F5F3FF;
  --c-purple-4: #7C3AED;

  /* ===== FLOW / STATUS SEMANTICS (theme/index.ts → FlowColors) ===== */
  --flow-attention: #FBBF24;
  --flow-error: #F87171;
  --flow-done: #34D399;
  --flow-retrying: #A78BFA;
  --flow-running: #4A7CF7;
  --flow-lime: #CDF545;
  --flow-muted: #6B7280;
  --flow-on-accent: #0D0D1A;

  /* ===== CANVAS NODE KINDS (styles/tokens.css) ===== */
  --kind-feature: #6366f1;
  --kind-requirement: #f59e0b;
  --kind-dependency: #ef4444;
  --kind-screen: #14b8a6;
  --kind-component: #a855f7;
  --kind-code: #22c55e;
  --kind-note: #6b7280;
  --kind-feedback: #38bdf8;
  --kind-experiment: #8b5cf6;

  /* ===== DEPARTMENT / PERSONA ACCENTS (avatar backgrounds) ===== */
  --dept-strategy:       #4A7CF7;  /* CoCo · COO */
  --dept-product:        #E0A52E;  /* Poppy · VP Product (gold) */
  --dept-design:         #14b8a6;  /* DeDe · VP Design */
  --dept-engineering:    #2F7D5B;  /* Archie · VP Engineering (green) */
  --dept-finance:        #34D399;  /* FiFi · VP Finance */
  --dept-customer:       #38bdf8;  /* Cora · VP Customer */
  --dept-infrastructure: #A78BFA;  /* Iggy · VP Infrastructure */
  --dept-marketing:      #F472B6;  /* MiMi · VP Marketing */

  /* ===== TYPE FAMILIES (theme/index.ts → Fonts + App.css) ===== */
  --font-display: 'Space Grotesk', 'IBM Plex Sans', -apple-system, sans-serif; /* titles, card headers */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', SFMono-Regular, Consolas, Menlo, monospace;

  /* ===== TYPE SCALE (styles/tokens.css + App.css observed sizes) ===== */
  --fs-xs: 10px;     /* eyebrow / micro-label */
  --fs-sm: 12px;     /* captions, meta, pills */
  --fs-base: 14px;   /* body / UI default */
  --fs-lg: 16px;     /* select value, lead */
  --fs-xl: 18px;     /* card / mobile title */
  --fs-2xl: 24px;    /* section title */
  --fs-3xl: 30px;    /* view heading + stat value */

  /* ===== SPACING (theme/index.ts → Spacing) ===== */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-xs2: 6px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* ===== RADII (theme/index.ts → Radii + tokens.css) ===== */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-panel: 18px;   /* App.css .shell-panel / .shell-stat-card */
  --r-pill: 9999px;

  /* ===== SHADOWS (theme/index.ts → Shadows + App.css elevation) ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-panel: 0 18px 44px rgba(0, 0, 0, 0.16);   /* glass panels */
  --shadow-card: 0 16px 30px rgba(15, 23, 42, 0.08);
  --shadow-menu: 0 32px 56px rgba(0, 0, 0, 0.2);

  /* ===== SHELL LAYOUT METRICS (App.css) ===== */
  --rail-width: 240px;
  --rail-collapsed: 56px;
  --header-height: 56px;
  --chat-drawer-width: 360px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-medium: 260ms;
}

/* =====================================================================
   DARK THEME (default) — semantic.ts DarkTheme + App.css shell vars
   Apply to a root element with class .coh-dark (or :root by default).
   ===================================================================== */
:root,
.coh-dark {
  --bg-primary: #0D0D1A;
  --bg-secondary: #1A1A2E;
  --bg-tertiary: #16213E;
  --bg-elevated: #1E2A4A;
  --bg-card: #1A1A2E;

  --shell-base: rgba(6, 13, 22, 0.98);
  --shell-elevated: rgba(10, 18, 28, 0.98);
  --shell-border: rgba(255, 255, 255, 0.08);
  --shell-hover-bg: rgba(205, 245, 69, 0.08);
  --shell-active-bg: rgba(205, 245, 69, 0.12);
  --shell-active-border: rgba(205, 245, 69, 0.28);
  --shell-text-primary: #F7F9FB;
  --shell-text-secondary: rgba(223, 232, 249, 0.88);
  --shell-text-muted: rgba(213, 223, 241, 0.66);

  --text-primary: #FAFAFA;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
  --text-on-accent: #FFFFFF;

  --border-default: #2D3561;
  --border-subtle: #1E2A4A;

  --accent-primary: #4A7CF7;
  --accent-primary-muted: rgba(74, 124, 247, 0.15);
  --accent-success: #34D399;
  --accent-warning: #FBBF24;
  --accent-warning-muted: rgba(251, 191, 36, 0.15);
  --accent-danger: #F87171;
  --accent-danger-muted: rgba(248, 113, 113, 0.15);
}

/* =====================================================================
   LIGHT THEME — semantic.ts LightTheme. Apply class .coh-light to root.
   ===================================================================== */
.coh-light {
  --bg-primary: #F8F9FA;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F1F3F5;
  --bg-elevated: #FFFFFF;
  --bg-card: #FFFFFF;

  --shell-base: #F5F6F8;
  --shell-elevated: #FFFFFF;
  --shell-border: #D1D5DB;
  --shell-hover-bg: rgba(74, 124, 247, 0.08);
  --shell-active-bg: rgba(74, 124, 247, 0.14);
  --shell-active-border: rgba(74, 124, 247, 0.3);
  --shell-text-primary: #1A1A2E;
  --shell-text-secondary: #4B5563;
  --shell-text-muted: #9CA3AF;

  --text-primary: #1A1A2E;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;
  --text-on-accent: #1A1A2E;

  --border-default: #E5E7EB;
  --border-subtle: #F3F4F6;

  --accent-primary: #4A7CF7;
  --accent-primary-muted: rgba(74, 124, 247, 0.1);
  --accent-success: #10B981;
  --accent-warning: #F59E0B;
  --accent-warning-muted: rgba(245, 158, 11, 0.1);
  --accent-danger: #EF4444;
  --accent-danger-muted: rgba(239, 68, 68, 0.1);
}

/* =====================================================================
   SEMANTIC TYPE ROLES — ready-to-use element styles
   ===================================================================== */
.coh-eyebrow {
  font-family: var(--font-base);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shell-text-muted);
}
.coh-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.05;
  color: var(--text-primary);
}
.coh-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
}
.coh-panel-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.coh-body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
}
.coh-caption {
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  color: var(--shell-text-muted);
}
.coh-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}