/* ==========================================================================
   STUDOKE THEME — SINGLE SOURCE OF TRUTH
   --------------------------------------------------------------------------
   Every color on the site lives here. To re-brand the whole project, change
   --brand-500 (and its scale) in ONE place.

   Brand:  Electric Blue  #0055ff  (matches the StudoKe logo)
   Neutrals: slate-family, dark-first (default theme is dark)
   Semantics: success / warning / danger / info

   This file also defines the legacy aliases used by style.css, details.css,
   book-details.css and hub.css, so those files no longer need their own
   color definitions. It is loaded first via @import in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND — ELECTRIC BLUE
   -------------------------------------------------------------------------- */
:root {
  --brand-50:  #eef4ff;
  --brand-100: #dce8ff;
  --brand-200: #b8d0ff;
  --brand-300: #85adff;
  --brand-400: #4d85ff;
  --brand-500: #0055ff; /* ← THE brand color (electric blue) */
  --brand-600: #0047e0;
  --brand-700: #0039b8;
  --brand-800: #06308f;
  --brand-900: #0c2c6d;
  --brand-950: #081b44;

  /* RGB triplets — enable Tailwind alpha modifiers (bg-brand-500/20, etc.) */
  --brand-50-rgb:  238 244 255;
  --brand-100-rgb: 220 232 255;
  --brand-200-rgb: 184 208 255;
  --brand-300-rgb: 133 173 255;
  --brand-400-rgb: 77 133 255;
  --brand-500-rgb: 0 85 255;
  --brand-600-rgb: 0 71 224;
  --brand-700-rgb: 0 57 184;
  --brand-800-rgb: 6 48 143;
  --brand-900-rgb: 12 44 109;
  --brand-950-rgb: 8 27 68;
}

/* --------------------------------------------------------------------------
   2. SEMANTIC COLORS
   -------------------------------------------------------------------------- */
:root {
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-info: #2196f3;
  --color-danger: #f44336;
  --color-contact: #7c3aed;
  --color-open-source: #0d9488;
}

/* --------------------------------------------------------------------------
   3. DARK THEME (default)
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-primary: #0b1120;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  --bg-gradient-start: #101a2e;
  --bg-gradient-end: #0a0f1d;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-heading: #f8fafc;
  --text-disabled: #475569;
  --border-primary: #1e293b;
  --border-secondary: #334155;
  --element-bg-hover: #1e293b;
  --element-bg: #1f2937;
  --bg-muted: #1e293b;
  --glass-bg: rgba(26, 26, 26, 0.85);
  --glass-border: rgba(255, 255, 255, 0.1);
  --color-border-hover: #334155;
  --color-surface-hover: #1e293b;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-strong-color: rgba(0, 0, 0, 0.55);
  --shadow-text-color: rgba(0, 0, 0, 0.7);
  --card-border-light-trans: rgba(255, 255, 255, 0.08);
  --card-bg-trans: rgba(17, 24, 39, 0.7);
  --card-sheen-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  --bg-overlay-dark: rgba(3, 7, 18, 0.85);
  --color-success-bg: rgba(76, 175, 80, 0.15);
  --color-warning-bg: rgba(255, 152, 0, 0.15);
  --color-danger-bg: rgba(244, 67, 54, 0.15);
}

/* --------------------------------------------------------------------------
   4. LIGHT THEME
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef2f7;
  --bg-gradient-start: #ffffff;
  --bg-gradient-end: #eef2f7;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-heading: #0f172a;
  --text-disabled: #94a3b8;
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;
  --element-bg-hover: #eef2f7;
  --element-bg: #ffffff;
  --bg-muted: #eef2f7;
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(0, 0, 0, 0.1);
  --color-border-hover: #cbd5e1;
  --color-surface-hover: #eef2f7;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-strong-color: rgba(0, 0, 0, 0.15);
  --shadow-text-color: rgba(0, 0, 0, 0.2);
  --card-border-light-trans: rgba(0, 0, 0, 0.1);
  --card-bg-trans: rgba(255, 255, 255, 0.8);
  --card-sheen-gradient: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0));
  --bg-overlay-dark: rgba(248, 250, 252, 0.85);
  --color-success-bg: rgba(76, 175, 80, 0.1);
  --color-warning-bg: rgba(255, 152, 0, 0.1);
  --color-danger-bg: rgba(244, 67, 54, 0.1);
}

/* --------------------------------------------------------------------------
   5. LEGACY ALIASES — keep older CSS files working unchanged
   -------------------------------------------------------------------------- */
:root {
  --transition-speed: 0.3s;

  /* accent (was orange) → brand blue */
  --accent-primary: var(--brand-500);
  --accent-primary-hover: var(--brand-400);
  --accent-primary-transparent: rgb(var(--brand-500-rgb) / 0.15);
  --accent-border: rgb(var(--brand-500-rgb) / 0.4);
  --accent-glow: rgb(var(--brand-500-rgb) / 0.35);
  --spinner-base: rgb(var(--brand-500-rgb) / 0.2);
  --spinner-top: var(--brand-500);

  /* details.css palette */
  --color-background: var(--bg-primary);
  --color-primary-hover: var(--brand-600);
  --color-primary-rgb: var(--brand-500-rgb);
  --color-success-rgb: 76 175 80;
  --color-warning-rgb: 255 152 0;
  --color-danger-rgb: 244 67 54;
  --category-color: var(--accent-primary);
  --color-surface: var(--bg-secondary);
  --color-border: var(--border-primary);
  --color-text-primary: var(--text-heading);
  --color-text-secondary: var(--text-secondary);
  --color-accent: var(--brand-500);
  --color-accent-hover: var(--brand-400);

  /* book-details.css palette */
  --primary: var(--brand-500);
  --primary-hover: var(--brand-600);
  --primary-light: rgb(var(--brand-500-rgb) / 0.1);
  --primary-glow: rgb(var(--brand-500-rgb) / 0.3);
  --secondary: #64748b;
  --success: #059669;
  --warning: #d97706;
  --error: #dc2626;
  --bg-card: var(--bg-secondary);
  --bg-gradient: linear-gradient(135deg, #0055ff 0%, #0c2c6d 100%);
  --bg-hero: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  --border: var(--border-primary);
  --border-hover: var(--border-secondary);

  /* book-details radius / shadow / motion tokens */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;

  /* layout compat */
  --vertical-nav-width: var(--sidebar-expanded-w, 240px);
}