@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: #021426;
  --foreground: #e6f0ff;

  --card: #06213A;
  --card-foreground: #ffffff;

  --primary: #021426;
  --primary-foreground: #ffffff;

  --secondary: #0c2c4d;
  --secondary-foreground: #e6f0ff;

  --muted: #08243f;
  --muted-foreground: #9bb8e8;

  --accent: #ABC3EB;
  --accent-foreground: #021426;

  --destructive: #c53030;
  --destructive-foreground: #ffffff;

  --success: #1f8a4c;
  --success-foreground: #ffffff;

  --border: #0f355c;
  --input: #0f355c;
  --ring: #ABC3EB;

  --panel-background: #06213A;
  --panel-foreground: #ffffff;
  --panel-primary: var(--primary);
  --panel-primary-foreground: var(--primary-foreground);
  --panel-accent: var(--accent);
  --panel-accent-foreground: var(--accent-foreground);
  --panel-border: var(--border);
  --panel-ring: var(--ring);

  --dropdown-background: #06213A;
  --dropdown-foreground: #ffffff;

  --nav-hover: #0f355c;
}

.dark {
  --background: #021426;
  --foreground: #e6f0ff;

  --card: #06213A;
  --card-foreground: #ffffff;

  --primary: #ABC3EB;
  --primary-foreground: #021426;

  --secondary: #0c2c4d;
  --secondary-foreground: #e6f0ff;

  --muted: #08243f;
  --muted-foreground: #9bb8e8;

  --accent: #ABC3EB;
  --accent-foreground: #021426;

  --destructive: #dc2626;
  --destructive-foreground: #ffffff;

  --success: #22a55a;
  --success-foreground: #ffffff;

  --border: #0f355c;
  --input: #0f355c;
  --ring: #ABC3EB;

  --panel-background: #06213A;
  --panel-foreground: #ffffff;
  --panel-primary: var(--primary);
  --panel-primary-foreground: var(--primary-foreground);
  --panel-accent: var(--accent);
  --panel-accent-foreground: var(--accent-foreground);
  --panel-border: var(--border);
  --panel-ring: var(--ring);

  --dropdown-background: #06213A;
  --dropdown-foreground: #ffffff;

  --nav-hover: #0f355c;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-panel: var(--panel-background);
  --color-panel-foreground: var(--panel-foreground);
  --color-panel-primary: var(--panel-primary);
  --color-panel-primary-foreground: var(--panel-primary-foreground);
  --color-panel-accent: var(--panel-accent);
  --color-panel-accent-foreground: var(--panel-accent-foreground);
  --color-panel-border: var(--panel-border);
  --color-panel-ring: var(--panel-ring);
  --color-dropdown: var(--dropdown-background);
  --color-dropdown-foreground: var(--dropdown-foreground);
  --color-nav-hover: var(--nav-hover);
}