/* ═══════════════════════════════════════════════════════════
   Skillie Design System — Colors & Typography
   Bonaire (operational) + Solene (coaching) unified tokens
   ═══════════════════════════════════════════════════════════ */

/* ── Font Face ── */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════════
   COLOR SYSTEM — Bonaire (Operational Dashboard)
   Three theme modes: dark (default), light, bliss (warm indigo)
   ══════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark light;
}

/* ── Dark Theme (default) ── */
[data-theme="dark"] {
  /* Backgrounds */
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #242836;
  --border: #2e3345;
  
  /* Text */
  --text: #e4e6ef;
  --text-dim: #8b8fa3;
  --on-accent: #0f1117;

  /* Accent (brand teal — matches Network logo focal node). */
  --accent: #14b8a6;        /* teal-500, primary */
  --accent-hover: #0d9488;  /* teal-600, pressed / hover */
  --accent-faint: rgba(20,184,166,0.14);
  
  /* Semantic colors */
  --critical: #ff4d6a;
  --critical-bg: rgba(255,77,106,0.12);
  --warning: #fbbf24;
  --low: #fbbf24;
  --low-bg: rgba(251,191,36,0.14);
  --success: #34d399;
  --success-bg: rgba(52,211,153,0.12);
  --success-border: rgba(52,211,153,0.3);
  
  /* Skip/neutral states */
  --skip: #3a3f52;
  --skip-text: #6b7089;
  
  /* Interaction states (subtle teal tint on hover, neutral on row hover) */
  --hover-row: rgba(228,230,239,0.04);
  --hover-link: rgba(20,184,166,0.08);
  --active-link: rgba(20,184,166,0.14);
  
  /* Metrics (returning clients — slate family) */
  --metric-returning-clients: #94a3b8;
  --metric-returning-clients-muted: rgba(148, 163, 184, 0.22);
  
  /* Shadows */
  --card-shadow: none;
  --topbar-shadow: 0 1px 0 var(--border);
}

/* ── Light Theme ── */
[data-theme="light"] {
  /* Backgrounds */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface2: #f0f1f4;
  --border: #dde0e7;
  
  /* Text */
  --text: #1a1d27;
  --text-dim: #6b7089;
  --on-accent: #ffffff;

  /* Accent (brand teal — same family as dark theme, shifted darker so it
     reads well on a light surface). */
  --accent: #0d9488;        /* teal-600, primary on light */
  --accent-hover: #0f766e;  /* teal-700, pressed / hover */
  --accent-faint: rgba(13,148,136,0.10);
  
  /* Semantic colors */
  --critical: #dc3050;
  --critical-bg: rgba(220,48,80,0.08);
  --warning: #ca8a04;
  --low: #ca8a04;
  --low-bg: rgba(202,138,4,0.1);
  --success: #16a06a;
  --success-bg: rgba(22,160,106,0.08);
  --success-border: rgba(22,160,106,0.28);
  
  /* Skip/neutral states */
  --skip: #e2e4ea;
  --skip-text: #8b8fa3;
  
  /* Interaction states (teal tint to match the new accent) */
  --hover-row: rgba(0,0,0,0.02);
  --hover-link: rgba(13,148,136,0.06);
  --active-link: rgba(13,148,136,0.10);
  
  /* Metrics */
  --metric-returning-clients: #64748b;
  --metric-returning-clients-muted: rgba(100, 116, 139, 0.22);
  
  /* Shadows */
  --card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 8px rgba(0,0,0,0.04);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── Bliss Theme (warm paper + indigo accent) ── */
[data-theme="bliss"] {
  /* Backgrounds */
  --bg: #f8f7fc;
  --surface: #ffffff;
  --surface2: #f1f0fa;
  --border: #e8e6f2;
  
  /* Text */
  --text: #1a1a1a;
  --text-dim: #6b7089;
  --on-accent: #ffffff;
  
  /* Accent (indigo) */
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-faint: rgba(99,102,241,0.11);
  
  /* Semantic colors */
  --critical: #e05470;
  --critical-bg: rgba(224,84,112,0.09);
  --warning: #a16207;
  --low: #a16207;
  --low-bg: rgba(161,98,7,0.09);
  --success: #059669;
  --success-bg: rgba(5,150,105,0.09);
  --success-border: rgba(5,150,105,0.28);
  
  /* Skip/neutral states */
  --skip: #ede9f6;
  --skip-text: #9d8abf;
  
  /* Interaction states */
  --hover-row: rgba(139,92,246,0.04);
  --hover-link: rgba(139,92,246,0.06);
  --active-link: rgba(139,92,246,0.10);
  
  /* Metrics */
  --metric-returning-clients: #64748b;
  --metric-returning-clients-muted: rgba(100, 116, 139, 0.22);
  
  /* Shadows */
  --card-shadow: 0 1px 4px rgba(139,92,246,0.07), 0 1px 10px rgba(45,31,78,0.05);
  --topbar-shadow: 0 1px 4px rgba(139,92,246,0.10);
}

/* ══════════════════════════════════════════════════════════
   COLOR SYSTEM — Solene (AI Coaching Platform)
   Premium dark, purple accent, conversation-first
   ══════════════════════════════════════════════════════════ */

:root {
  /* Solene-specific colors (dark theme only) */
  --solene-bg: #080c16;
  --solene-bg-alt: #0d1424;
  --solene-bg-card: rgba(14, 22, 40, 0.88);
  --solene-bg-elevated: rgba(20, 30, 52, 0.92);
  --solene-bg-input: rgba(14, 22, 40, 0.7);
  --solene-bg-glass: rgba(14, 22, 40, 0.6);
  
  --solene-line: rgba(148, 163, 184, 0.1);
  --solene-line-strong: rgba(148, 163, 184, 0.2);
  
  --solene-text: #e2e8f0;
  --solene-text-secondary: #94a3b8;
  --solene-muted: #64748b;
  
  /* Solene accent (purple/violet) */
  --solene-accent: #c084fc;
  --solene-accent-soft: rgba(192, 132, 252, 0.1);
  --solene-accent-glow: rgba(192, 132, 252, 0.06);
  
  /* Solene semantic colors */
  --solene-teal: #2dd4bf;
  --solene-cyan: #38bdf8;
  --solene-rose: #fb7185;
  --solene-amber: #fbbf24;
  --solene-green: #34d399;
  --solene-violet: #a78bfa;
  --solene-blue: #60a5fa;
  
  /* Solene card type colors (for card gallery system) */
  --solene-card-chart: #60a5fa;
  --solene-card-script: #2dd4bf;
  --solene-card-goal: #c084fc;
  --solene-card-insight: #fbbf24;
  --solene-card-action: #34d399;
  --solene-card-scorecard: #818cf8;
  --solene-card-note: #94a3b8;
  --solene-card-diagnostic: #fb7185;
  --solene-card-conversation: #a78bfa;
}

/* ══════════════════════════════════════════════════════════
   SPACING & LAYOUT TOKENS
   ══════════════════════════════════════════════════════════ */

:root {
  --radius: 10px;
  --radius-lg: 16px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  
  --sidebar-w: 220px;
  --env-banner-h: 0px;
  
  /* Solene-specific */
  --solene-dev-ribbon-h: 24px;
  --solene-topbar-h: 52px;
  --solene-context-strip-h: 52px;
  
  /* Shadows */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);
  
  --transition: 0.2s ease;
}

:root:has(.env-banner) {
  --env-banner-h: 30px;
}

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM
   ══════════════════════════════════════════════════════════ */

/* Base type — system fonts for UI */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'Cormorant', Georgia, serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
}

/* Load Google Fonts when needed */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Semantic typography tokens */

/* Display (large headers, hero text) */
.text-display {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Heading hierarchy */
h1, .text-h1 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2, .text-h2 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

h3, .text-h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

h4, .text-h4 {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Body text */
.text-body {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 400;
}

.text-body-sm {
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Labels & UI chrome */
.text-label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.text-label-sm {
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Monospace (code, data) */
.text-mono {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-feature-settings: 'tnum' 1;
}

/* Specialized — Solene conversation text */
.text-conversation {
  font-family: var(--font-inter);
  font-size: 0.84rem;
  line-height: 1.55;
  font-weight: 400;
}

/* Specialized — Bonaire date headers (Cormorant serif) */
.text-date-header {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}


/* ── Sidebar "Powered by Gridspin" footer ── */
.sidebar-powered-by {
  margin-top: auto;
  padding: 18px 16px 14px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim, #8b8f98);
  font-weight: 600;
}
.sidebar-powered-by-brand {
  color: var(--accent, #a78bfa);
  font-weight: 700;
}