/* ========================================
   LFN DESIGN SYSTEM — Single Source of Truth
   Palette: Cyan/Blue
   Default: Dark Theme (:root)
   Light: .light or [data-theme="light"]
   ======================================== */

/* ----------------------------------------
   DARK THEME (Default)
   ---------------------------------------- */
:root {
  /* Surfaces */
  --color-background: #0A0E1F;
  --color-surface: #151D2D;
  --color-surface2: #1A2332;
  --color-surface3: #1E2838;
  --color-surface4: #232D3D;
  --color-card: #0F172A;
  --color-panel: #1E293B;

  /* Primary — Cyan */
  --color-primary: #38BDF8;
  --color-primary-light: #7DD3FC;
  --color-primary-dark: #0EA5E9;
  --color-primary-rgb: 56 189 248;

  /* Secondary — Blue */
  --color-secondary: #3B82F6;
  --color-secondary-light: #60A5FA;
  --color-secondary-rgb: 59 130 246;

  /* Accent — Teal */
  --color-accent: #14B8A6;
  --color-accent-rgb: 20 184 166;

  /* Semantic */
  --color-success: #22C55E;
  --color-success-rgb: 34 197 94;
  --color-danger: #EF4444;
  --color-danger-rgb: 239 68 68;
  --color-warning: #F59E0B;
  --color-warning-rgb: 245 158 11;

  /* Borders */
  --color-border: #334155;
  --color-border-subtle: #1E293B;
  --color-divider: #1E293B;

  /* Text */
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  --color-text-disabled: #475569;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 4px 14px rgba(56, 189, 248, 0.25);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 300ms ease;
}

/* ----------------------------------------
   LIGHT THEME
   ---------------------------------------- */
.light,
[data-theme="light"] {
  --color-background: #F1F5F9;
  --color-surface: #FFFFFF;
  --color-surface2: #F8FAFC;
  --color-surface3: #E2E8F0;
  --color-surface4: #CBD5E1;
  --color-card: #FFFFFF;
  --color-panel: #F1F5F9;

  /* Borders */
  --color-border: #E2E8F0;
  --color-border-subtle: #F1F5F9;
  --color-divider: #E2E8F0;

  /* Text */
  --color-text-primary: #0F172A;
  --color-text-secondary: #64748B;
  --color-text-muted: #94A3B8;
  --color-text-disabled: #CBD5E1;

  /* Shadows (lighter for light theme) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 14px rgba(56, 189, 248, 0.15);
}