/* ============================================
   COLOR SYSTEM - PROJECT THEME
   ============================================ */

:root {
  /* Base Colors */
  --background: #fafbfc;
  --foreground: #144d52;
  --muted: #f1f5f7;
  --muted-foreground: #64748b;

  /* Interactive Colors */
  --primary: #144d52;
  --primary-foreground: #ffffff;
  --secondary: #153a47;
  --secondary-foreground: #ffffff;
  --accent: #153a47;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --success: #22c55e;
  --success-foreground: #ffffff;
  --warning: #f59e0b;
  --warning-foreground: #000000;
  --info: #3b82f6;
  --info-foreground: #ffffff;

  /* Surface Colors */
  --card: #ffffff;
  --card-foreground: #144d52;
  --popover: #ffffff;
  --popover-foreground: #144d52;

  /* Form Colors */
  --input: #ffffff;
  --border: #cbd5e1;
  --ring: #144d52;

  /* Chart Colors */
  --chart-1: #144d52;
  --chart-2: #153a47;
  --chart-3: #0ea5e9;
  --chart-4: #8b5cf6;
  --chart-5: #10b981;

  /* Sidebar Colors */
  --sidebar: #f8fafc;
  --sidebar-foreground: #144d52;
  --sidebar-primary: #144d52;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #153a47;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #e2e8f0;
  --sidebar-ring: #144d52;

  /* Effects & Overlays */
  --gradient-from: rgba(20, 77, 82, 0.08);
  --gradient-via: rgba(250, 251, 252, 0.95);
  --gradient-to: rgba(21, 58, 71, 0.12);
  --pattern-tint: rgba(20, 77, 82, 0.04);
  --pattern-dot: #e2e8f0;

  /* Shadows & States */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-large: rgba(0, 0, 0, 0.25);
}

.dark {
  /* Base Colors - Dark Mode */
  --background: #0f172a;
  --foreground: #f8fafc;
  --muted: #1e293b;
  --muted-foreground: #64748b;

  /* Interactive Colors - Dark Mode */
  --primary: #144d52;
  --primary-foreground: #ffffff;
  --secondary: #153a47;
  --secondary-foreground: #ffffff;
  --accent: #144d52;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --success: #22c55e;
  --success-foreground: #ffffff;
  --warning: #f59e0b;
  --warning-foreground: #000000;
  --info: #3b82f6;
  --info-foreground: #ffffff;

  /* Surface Colors - Dark Mode */
  --card: #1e293b;
  --card-foreground: #f8fafc;
  --popover: #1e293b;
  --popover-foreground: #f8fafc;

  /* Form Colors - Dark Mode */
  --input: #1e293b;
  --border: #334155;
  --ring: #144d52;

  /* Chart Colors - Dark Mode */
  --chart-1: #144d52;
  --chart-2: #153a47;
  --chart-3: #0ea5e9;
  --chart-4: #8b5cf6;
  --chart-5: #10b981;

  /* Sidebar Colors - Dark Mode */
  --sidebar: #0f172a;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #144d52;
  --sidebar-primary-foreground: #f8fafc;
  --sidebar-accent: #153a47;
  --sidebar-accent-foreground: #f8fafc;
  --sidebar-border: #334155;
  --sidebar-ring: #144d52;

  /* Effects & Overlays - Dark Mode */
  --gradient-from: rgba(20, 77, 82, 0.2);
  --gradient-via: rgba(15, 23, 42, 0.9);
  --gradient-to: rgba(21, 58, 71, 0.25);
  --pattern-tint: rgba(20, 77, 82, 0.08);
  --pattern-dot: #334155;

  /* Shadows & States - Dark Mode */
  --shadow-light: rgba(0, 0, 0, 0.2);
  --shadow-medium: rgba(0, 0, 0, 0.35);
  --shadow-large: rgba(0, 0, 0, 0.5);
}