/* Global Color Scheme Variables */
/* Deep Blue Palette: Rich Black → Prussian Blue → Indigo Dye */

:root {
  /* Primary Brand Colors - Rich Black */
  --rich-black: #00111c;              /* Deepest blue-black */
  --rich-black-2: #001523;            /* Rich black variant 2 */
  --rich-black-3: #001a2c;            /* Rich black variant 3 */

  /* Primary Brand Colors - Prussian Blue */
  --prussian-blue: #002137;           /* Prussian blue base */
  --prussian-blue-2: #00253e;         /* Prussian blue variant 2 */
  --prussian-blue-3: #002945;         /* Prussian blue variant 3 */
  --prussian-blue-4: #002e4e;         /* Prussian blue variant 4 */
  --prussian-blue-5: #003356;         /* Prussian blue variant 5 */

  /* Primary Brand Colors - Indigo Dye */
  --indigo-dye: #003a61;              /* Indigo dye base */
  --indigo-dye-2: #00406c;            /* Indigo dye variant 2 */

  /* Semantic Color Mappings */
  --color-primary-darkest: var(--rich-black);
  --color-primary-darker: var(--rich-black-2);
  --color-primary-dark: var(--rich-black-3);
  --color-primary-mid: var(--prussian-blue-3);
  --color-primary: var(--prussian-blue-5);
  --color-primary-light: var(--indigo-dye);
  --color-primary-lighter: var(--indigo-dye-2);
  --color-primary-lightest: #004778;  /* Extended for lighter UI elements */

  /* Gradients */
  --gradient-primary: linear-gradient(90deg, #00111c, #001523, #001a2c, #002137, #00253e, #002945, #002e4e, #003356, #003a61, #00406c);
  --gradient-primary-reverse: linear-gradient(270deg, #00111c, #001523, #001a2c, #002137, #00253e, #002945, #002e4e, #003356, #003a61, #00406c);
  --gradient-primary-diagonal: linear-gradient(135deg, #00111c, #001523, #001a2c, #002137, #00253e, #002945, #002e4e, #003356, #003a61, #00406c);
  --gradient-primary-diagonal-reverse: linear-gradient(315deg, #00111c, #001523, #001a2c, #002137, #00253e, #002945, #002e4e, #003356, #003a61, #00406c);
  --gradient-primary-radial: radial-gradient(circle, #00111c, #001523, #001a2c, #002137, #00253e, #002945, #002e4e, #003356, #003a61, #00406c);

  /* Simple 3-Stop Gradients (for better performance) */
  --gradient-simple: linear-gradient(to right, var(--indigo-dye-2), var(--prussian-blue-3), var(--rich-black));
  --gradient-simple-diagonal: linear-gradient(135deg, var(--rich-black) 0%, var(--prussian-blue-3) 50%, var(--indigo-dye-2) 100%);

  /* Background Gradients with Opacity */
  --gradient-overlay-light: linear-gradient(135deg, rgba(0, 17, 28, 0.95) 0%, rgba(0, 41, 69, 0.95) 50%, rgba(0, 64, 108, 0.95) 100%);
  --gradient-overlay-medium: linear-gradient(135deg, rgba(0, 17, 28, 0.8) 0%, rgba(0, 41, 69, 0.8) 50%, rgba(0, 64, 108, 0.8) 100%);
  --gradient-overlay-subtle: linear-gradient(135deg, rgba(0, 17, 28, 0.6) 0%, rgba(0, 41, 69, 0.6) 50%, rgba(0, 64, 108, 0.6) 100%);

  /* Accent Colors (derived from the palette) */
  --color-accent-blue: #005a9c;       /* Brighter blue accent */
  --color-accent-cyan: #0077b6;       /* Cyan accent */
  --color-accent-light: #0096c7;      /* Light blue accent */

  /* Text Colors */
  --color-text-on-primary: #ffffff;
  --color-text-on-primary-muted: rgba(255, 255, 255, 0.8);
  --color-text-on-primary-subtle: rgba(255, 255, 255, 0.6);

  /* Border Colors */
  --color-border-primary: rgba(0, 64, 108, 0.3);
  --color-border-primary-light: rgba(0, 64, 108, 0.2);
  --color-border-primary-strong: rgba(0, 64, 108, 0.5);

  /* Shadow Colors */
  --shadow-primary: 0 4px 14px rgba(0, 17, 28, 0.4);
  --shadow-primary-lg: 0 10px 40px rgba(0, 17, 28, 0.5);
  --shadow-primary-hover: 0 6px 20px rgba(0, 41, 69, 0.5);

  /* Hover & Focus States */
  --color-primary-hover: #004d85;     /* Slightly lighter for hover */
  --color-primary-focus: #0077b6;     /* Bright for focus */
  --color-focus-ring: rgba(0, 64, 108, 0.3);

  /* Success, Warning, Error (complementary to the blue palette) */
  --color-success: #10b981;           /* Green */
  --color-success-light: rgba(16, 185, 129, 0.1);
  --color-warning: #f59e0b;           /* Amber */
  --color-warning-light: rgba(245, 158, 11, 0.1);
  --color-error: #ef4444;             /* Red */
  --color-error-light: rgba(239, 68, 68, 0.1);
  --color-info: var(--indigo-dye);    /* Indigo from palette */
  --color-info-light: rgba(0, 58, 97, 0.1);

  /* Neutral Colors (for light backgrounds) */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Background Colors */
  --bg-primary: var(--rich-black);
  --bg-primary-gradient: var(--gradient-simple-diagonal);
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: rgba(255, 255, 255, 1);

  /* Spacing (for consistency) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

/* Dark Mode Overrides */
.dark {
  --color-primary-hover: var(--indigo-dye);
  --color-primary-focus: var(--indigo-dye-2);

  --bg-card: rgba(17, 24, 39, 0.95);
  --bg-card-hover: rgba(17, 24, 39, 1);

  --color-text-on-card: #f9fafb;
  --color-border-card: rgba(255, 255, 255, 0.1);
}

/* Additional utility classes using the color scheme */
.bg-primary {
  background: var(--rich-black);
}

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

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

.bg-primary-gradient-simple {
  background: var(--gradient-simple-diagonal);
}

.text-primary {
  color: var(--prussian-blue-5);
}

.text-on-primary {
  color: var(--color-text-on-primary);
}

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

/* Webkit specific gradient backgrounds for older browsers */
.bg-gradient-webkit {
  background: var(--rich-black);  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #00406c, #002945, #00111c);  /* Chrome 10-25, Safari 5.1-6 */
  background: var(--gradient-simple); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* Semantic text color utilities */
.text-success {
  color: var(--color-success);
}

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

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