/* ==========================================================================
   Lyubimchik Analytics — Design Tokens
   Based on Prototype C (Audience-Aware Analytics Dashboard)
   ========================================================================== */

:root {
  /* ── Core Colors ── */
  --bg: #f5f7fa;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-input: #ffffff;
  --border: #e2e8f0;
  --border-hover: #94a3b8;
  --text-primary: #1a202c;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-body: #475569;
  --text-inverse: #ffffff;

  /* ── Accent ── */
  --accent: #0369a1;
  --accent-hover: #075985;
  --accent-bg: #dbeafe;
  --accent-bg-subtle: #f0f9ff;
  --accent-border: #bae6fd;

  /* ── Semantic ── */
  --success: #16a34a;
  --success-bg: #f0fdf4;
  --success-border: #bbf7d0;
  --success-text: #166534;
  --success-text-light: #15803d;

  --warning: #ea580c;
  --warning-bg: #fffbeb;
  --warning-text: #d97706;
  --warning-text-dark: #92400e;
  --warning-border: #fde68a;

  --danger: #cf222e;
  --danger-bg: #fef2f2;
  --danger-text: #dc2626;
  --danger-border: #fecaca;

  --info: #0369a1;
  --info-bg: #f0f9ff;
  --info-border: #bae6fd;

  /* ── Audience Segmentation ── */
  --b2b: #8b5cf6;
  --b2b-bg: #ede9fe;
  --b2b-text: #6d28d9;
  --b2b-text-alt: #7c3aed;

  --b2c: #06b6d4;
  --b2c-bg: #ecfeff;
  --b2c-text: #0e7490;
  --b2c-text-alt: #0891b2;

  --mixed: #f59e0b;
  --mixed-bg: #fffbeb;
  --mixed-text: #b45309;
  --mixed-text-alt: #d97706;

  /* ── Solution Ranks ── */
  --rank-a: #16a34a;
  --rank-b: #ea580c;
  --rank-c: #cf222e;

  /* ── Author Roles ── */
  --role-shop-owner-bg: #fef3c7;
  --role-shop-owner-text: #92400e;
  --role-producer-bg: #e0e7ff;
  --role-producer-text: #3730a3;
  --role-pet-owner-bg: #dcfce7;
  --role-pet-owner-text: #166534;
  --role-vet-bg: #fce7f3;
  --role-vet-text: #9d174d;
  --role-unknown-bg: #f1f5f9;
  --role-unknown-text: #64748b;

  /* ── Spacing (8px grid) ── */
  --space-0: 0;
  --space-half: 4px;
  --space-1: 8px;
  --space-1-5: 12px;
  --space-2: 16px;
  --space-2-5: 20px;
  --space-3: 24px;
  --space-3-5: 28px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* ── Typography ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 22px;
  --font-size-4xl: 24px;
  --font-size-stat: 28px;
  --line-height: 1.6;
  --line-height-tight: 1.4;
  --line-height-snug: 1.5;

  /* ── Borders & Radius ── */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 20px;
  --radius-round: 50%;

  /* ── Shadows ── */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 4px 12px rgba(3, 105, 161, 0.08);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);

  /* ── Transitions ── */
  --transition: all 0.2s ease;
  --transition-fast: all 0.15s ease;

  /* ── Layout ── */
  --sidebar-width: 260px;
  --content-padding: 32px;

  /* ── Z-index layers ── */
  --z-sidebar: 100;
  --z-header: 200;
  --z-modal-overlay: 1000;
  --z-modal: 1001;
  --z-tooltip: 1100;
}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */

body.dark {
  /* ── Core Colors ── */
  --bg: #0d1117;
  --bg-card: #161b22;
  --bg-sidebar: #161b22;
  --bg-subtle: #0d1117;
  --bg-input: #0d1117;
  --border: #30363d;
  --border-hover: #484f58;
  --text-primary: #e1e8ed;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --text-body: #c9d1d9;
  --text-inverse: #ffffff;

  /* ── Accent ── */
  --accent: #58a6ff;
  --accent-hover: #79b8ff;
  --accent-bg: #1f4e78;
  --accent-bg-subtle: #0c2d48;
  --accent-border: #164e63;

  /* ── Semantic ── */
  --success: #4ade80;
  --success-bg: #052e16;
  --success-border: #166534;
  --success-text: #4ade80;
  --success-text-light: #86efac;

  --warning: #fbbf24;
  --warning-bg: #451a03;
  --warning-text: #fbbf24;
  --warning-text-dark: #fbbf24;
  --warning-border: #854d0e;

  --danger: #fca5a5;
  --danger-bg: #450a0a;
  --danger-text: #fca5a5;
  --danger-border: #7f1d1d;

  --info: #58a6ff;
  --info-bg: #0c2d48;
  --info-border: #164e63;

  /* ── Audience Segmentation ── */
  --b2b-bg: #2e1065;
  --b2b-text: #a78bfa;
  --b2b-text-alt: #a78bfa;

  --b2c-bg: #083344;
  --b2c-text: #67e8f9;
  --b2c-text-alt: #67e8f9;

  --mixed-bg: #451a03;
  --mixed-text: #fbbf24;
  --mixed-text-alt: #fbbf24;

  /* ── Author Roles ── */
  --role-shop-owner-bg: #451a03;
  --role-shop-owner-text: #fbbf24;
  --role-producer-bg: #1e1b4b;
  --role-producer-text: #a5b4fc;
  --role-pet-owner-bg: #052e16;
  --role-pet-owner-text: #86efac;
  --role-vet-bg: #500724;
  --role-vet-text: #f9a8d4;
  --role-unknown-bg: #1e293b;
  --role-unknown-text: #94a3b8;

  /* ── Shadows ── */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 4px 12px rgba(88, 166, 255, 0.08);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ── Theme Toggle Icon Visibility ── */
.theme-icon-dark { display: none; }
body.dark .theme-icon-light { display: none; }
body.dark .theme-icon-dark { display: inline; }