/**
 * Ocean Sunset Theme - Dark Mode
 *
 * Color Palette:
 * - Ink Black (#001219): Ultra-dark backgrounds, infinite space
 * - Dark Teal (#005F73): Cards, surfaces, sophisticated depth
 * - Dark Cyan (#0A9396): Links, accents, modern sophistication
 * - Pearl Aqua (#94D2BD): Light accents, success states
 * - Wheat (#E9D8A6): Primary text, warmth and elegance
 * - Golden Orange (#EE9B00): Primary actions, creative flair
 * - Burnt Caramel (#CA6702): Hover states, toasted warmth
 * - Rusty Spice (#BB3E03): Warnings, energetic alerts
 * - Oxidized Iron (#AE2012): Errors, fiery passion
 * - Brown Red (#9B2226): Danger, critical actions
 *
 * To change the theme, simply update the color values in tailwind.config.js
 */

:root {
  /* Ocean Sunset Color Palette - CSS Variables for non-Tailwind usage */
  --color-ocean-ink: #001219;
  --color-ocean-deep: #005F73;
  --color-ocean-cyan: #0A9396;
  --color-ocean-aqua: #94D2BD;
  --color-ocean-wheat: #E9D8A6;
  --color-ocean-gold: #EE9B00;
  --color-ocean-caramel: #CA6702;
  --color-ocean-spice: #BB3E03;
  --color-ocean-iron: #AE2012;
  --color-ocean-rust: #9B2226;

  /* Semantic color mappings */
  --color-bg-primary: var(--color-ocean-ink);
  --color-bg-secondary: var(--color-ocean-deep);
  --color-bg-elevated: #003847; /* Slightly lighter than deep */

  --color-text-primary: var(--color-ocean-wheat);
  --color-text-secondary: var(--color-ocean-aqua);
  --color-text-muted: #7BA5A8;

  --color-accent-primary: var(--color-ocean-gold);
  --color-accent-secondary: var(--color-ocean-cyan);

  --color-border: rgba(148, 210, 189, 0.2); /* Pearl Aqua with opacity */
  --color-border-focus: var(--color-ocean-cyan);

  --color-success: var(--color-ocean-aqua);
  --color-warning: var(--color-ocean-spice);
  --color-error: var(--color-ocean-iron);
  --color-danger: var(--color-ocean-rust);
}

/* Base styles */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection colors */
::selection {
  background-color: var(--color-ocean-gold);
  color: var(--color-ocean-ink);
}

::-moz-selection {
  background-color: var(--color-ocean-gold);
  color: var(--color-ocean-ink);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-ocean-deep);
  border-radius: 6px;
  border: 2px solid var(--color-bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-ocean-cyan);
}

/* Focus states for accessibility */
*:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 2px;
}

/* Utility classes for theme consistency */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

.bg-primary {
  background-color: var(--color-bg-primary);
}

.bg-secondary {
  background-color: var(--color-bg-secondary);
}

.bg-elevated {
  background-color: var(--color-bg-elevated);
}

.border-default {
  border-color: var(--color-border);
}

/* Smooth transitions */
.transition-theme {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}