/**
 * High Velocity Labs Shared Design System (hvl-common)
 * File: /common/theme.css
 * 
 * Single source of truth for design tokens across all High Velocity Labs applications:
 * - highvelocitylabs.dev (Main Apex / Studio)
 * - admin.highvelocitylabs.dev (Operations Portal)
 * - finances.highvelocitylabs.dev (AI Family Office)
 * - ff.highvelocitylabs.dev (Fantasy Assistant)
 *
 * Primary Identity: Ostro Deep (London Blue Topaz, Natural History Museum)
 * Dark Palette: Soft Graphite & Slate
 */

:root {
  /* ==========================================================================
     1. Brand & Accent Identity (Ostro Deep London Blue Topaz)
     ========================================================================== */
  --hvl-brand-primary: #0265E8;
  --hvl-brand-hover: #0050BD;
  --hvl-brand-active: #0040A8;
  --hvl-brand-light: #38BDF8;
  --hvl-brand-glow: rgba(2, 101, 232, 0.25);
  --hvl-brand-bg-subtle: rgba(2, 101, 232, 0.08);
  --hvl-brand-border-subtle: rgba(2, 101, 232, 0.25);

  /* Unified App-Level Aliases */
  --brand-primary: var(--hvl-brand-primary);
  --brand-primary-hover: var(--hvl-brand-hover);
  --brand-primary-active: var(--hvl-brand-active);
  --brand-primary-light: var(--hvl-brand-light);
  --brand-primary-glow: var(--hvl-brand-glow);
  --brand-primary-bg: var(--hvl-brand-bg-subtle);
  --brand-primary-border: var(--hvl-brand-border-subtle);

  --london-blue: var(--hvl-brand-primary);
  --london-blue-light: var(--hvl-brand-light);
  --london-blue-glow: var(--hvl-brand-glow);

  --accent: var(--hvl-brand-primary);
  --accent-hover: var(--hvl-brand-hover);
  --accent-glow: var(--hvl-brand-glow);
  --accent-blue: var(--hvl-brand-primary);
  --accent-blue-hover: var(--hvl-brand-hover);
  --accent-blue-light: var(--hvl-brand-light);
  --accent-blue-bg: var(--hvl-brand-bg-subtle);
  --accent-blue-border: var(--hvl-brand-border-subtle);
  --accent-orange: var(--hvl-brand-primary);
  --accent-orange-hover: var(--hvl-brand-hover);
  --accent-orange-glow: var(--hvl-brand-glow);
  --accent-orange-bg: var(--hvl-brand-bg-subtle);
  --accent-orange-border: var(--hvl-brand-border-subtle);

  /* ==========================================================================
     2. Status & Semantic Colors
     ========================================================================== */
  --status-green: #059669;
  --status-green-bg: #ECFDF5;
  --status-green-border: #A7F3D0;
  --green: #10B981;
  --green-glow: rgba(16, 185, 129, 0.15);

  --status-red: #DC2626;
  --status-red-bg: #FEF2F2;
  --status-red-border: #FECACA;
  --rose: #F43F5E;
  --rose-glow: rgba(244, 63, 94, 0.15);

  --accent-amber: #D97706;
  --accent-amber-hover: #B45309;
  --accent-amber-bg: #FEF3C7;
  --accent-amber-border: #FDE68A;
  --amber: #F59E0B;
  --amber-glow: rgba(245, 158, 11, 0.15);

  --accent-purple: #7C3AED;
  --accent-purple-bg: #F5F3FF;
  --accent-purple-border: #DDD6FE;

  --accent-yellow: #B45309;
  --accent-yellow-bg: #FEFCE8;
  --accent-yellow-border: #FEF08A;

  --status-gray: #475569;
  --status-gray-bg: #F1F5F9;
  --status-gray-border: #E2E8F0;

  /* ==========================================================================
     3. Light Theme Surfaces (Monarch-Style Financial Cards)
     ========================================================================== */
  --bg-canvas: #F8FAFC;
  --bg-sidebar: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F1F5F9;
  --bg-surface-hover: #F8FAFC;

  --border-color: #E2E8F0;
  --border-bright: #CBD5E1;
  --border-subtle: #F1F5F9;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;

  /* Legacy aliases */
  --bg: #181B22;
  --card-bg: #212631;
  --card-hover: #262B37;
  --border: #2E3544;
  --border-hover: #40495C;
  --text-main: #FFFFFF;
  --text-body: #CBD5E1;
  --text-dim: #64748B;

  /* ==========================================================================
     4. Geometry & Radii
     ========================================================================== */
  --card-radius: 6px;
  --radius-badge: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   5. Dark Theme: HVL Soft Graphite & Slate
   ========================================================================== */
[data-theme="dark"],
:root[data-theme="dark"],
.dark-theme {
  --bg: #181B22;
  --bg-canvas: #181B22;
  --bg-sidebar: #13161C;
  --bg-surface: #212631;
  --card-bg: #212631;
  --bg-surface-elevated: #262B37;
  --card-hover: #262B37;
  --bg-surface-hover: #2E3544;

  --border: #2E3544;
  --border-color: #2E3544;
  --border-bright: #40495C;
  --border-hover: #40495C;
  --border-subtle: #242935;

  --text-main: #FFFFFF;
  --text-primary: #FFFFFF;
  --text-body: #CBD5E1;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-dim: #64748B;

  /* Ostro Deep Dark Mode Glow & Tints */
  --brand-primary: #0265E8;
  --brand-primary-hover: #38BDF8;
  --brand-primary-active: #0050BD;
  --brand-primary-light: #38BDF8;
  --brand-primary-glow: rgba(2, 101, 232, 0.35);
  --brand-primary-bg: rgba(2, 101, 232, 0.15);
  --brand-primary-border: rgba(2, 101, 232, 0.35);

  --accent-blue: #0265E8;
  --accent-blue-hover: #38BDF8;
  --accent-blue-light: #38BDF8;
  --accent-blue-bg: rgba(2, 101, 232, 0.15);
  --accent-blue-border: rgba(2, 101, 232, 0.35);

  --accent-orange: #0265E8;
  --accent-orange-hover: #38BDF8;
  --accent-orange-glow: rgba(2, 101, 232, 0.35);
  --accent-orange-bg: rgba(2, 101, 232, 0.15);
  --accent-orange-border: rgba(2, 101, 232, 0.35);

  --status-green-bg: rgba(16, 185, 129, 0.14);
  --status-green-border: rgba(16, 185, 129, 0.26);

  --status-red-bg: rgba(239, 68, 68, 0.14);
  --status-red-border: rgba(239, 68, 68, 0.26);

  --accent-purple: #A78BFA;
  --accent-purple-bg: rgba(139, 92, 246, 0.14);
  --accent-purple-border: rgba(139, 92, 246, 0.28);

  --accent-yellow: #FACC15;
  --accent-yellow-bg: rgba(234, 179, 8, 0.14);
  --accent-yellow-border: rgba(234, 179, 8, 0.28);

  --status-gray: #94A3B8;
  --status-gray-bg: rgba(100, 116, 139, 0.14);
  --status-gray-border: rgba(100, 116, 139, 0.28);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
}

/* System Dark Mode Detection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #181B22;
    --bg-canvas: #181B22;
    --bg-sidebar: #13161C;
    --bg-surface: #212631;
    --card-bg: #212631;
    --bg-surface-elevated: #262B37;
    --card-hover: #262B37;
    --bg-surface-hover: #2E3544;

    --border: #2E3544;
    --border-color: #2E3544;
    --border-bright: #40495C;
    --border-hover: #40495C;
    --border-subtle: #242935;

    --text-main: #FFFFFF;
    --text-primary: #FFFFFF;
    --text-body: #CBD5E1;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-dim: #64748B;

    --brand-primary: #0265E8;
    --brand-primary-hover: #38BDF8;
    --brand-primary-active: #0050BD;
    --brand-primary-light: #38BDF8;
    --brand-primary-glow: rgba(2, 101, 232, 0.35);
    --brand-primary-bg: rgba(2, 101, 232, 0.15);
    --brand-primary-border: rgba(2, 101, 232, 0.35);

    --accent-blue: #0265E8;
    --accent-blue-hover: #38BDF8;
    --accent-blue-light: #38BDF8;
    --accent-blue-bg: rgba(2, 101, 232, 0.15);
    --accent-blue-border: rgba(2, 101, 232, 0.35);

    --accent-orange: #0265E8;
    --accent-orange-hover: #38BDF8;
    --accent-orange-glow: rgba(2, 101, 232, 0.35);
    --accent-orange-bg: rgba(2, 101, 232, 0.15);
    --accent-orange-border: rgba(2, 101, 232, 0.35);

    --status-green-bg: rgba(16, 185, 129, 0.14);
    --status-green-border: rgba(16, 185, 129, 0.26);

    --status-red-bg: rgba(239, 68, 68, 0.14);
    --status-red-border: rgba(239, 68, 68, 0.26);

    --accent-purple: #A78BFA;
    --accent-purple-bg: rgba(139, 92, 246, 0.14);
    --accent-purple-border: rgba(139, 92, 246, 0.28);

    --accent-yellow: #FACC15;
    --accent-yellow-bg: rgba(234, 179, 8, 0.14);
    --accent-yellow-border: rgba(234, 179, 8, 0.28);

    --status-gray: #94A3B8;
    --status-gray-bg: rgba(100, 116, 139, 0.14);
    --status-gray-border: rgba(100, 116, 139, 0.28);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }
}