/* App Branding Color System - Medium Dark Mode */
/* ==================================================
 * Coefficiency Design System
 * Primary Theme: Medium Dark Mode
 * Last Updated: October 19, 2025
 * ================================================== */

:root {
  /* ==================================================
   * Backgrounds - Medium Dark Mode (Primary)
   * ================================================== */
  --app-bg-primary: #001C33;      /* Primary background (deep navy) */
  --app-bg-surface: #002945;      /* Cards, sections (medium navy) */
  --app-bg-elevated: #004A70;     /* Modals, overlays (lighter navy - improved contrast) */

  /* ==================================================
   * Text Hierarchy - Light Blue Tones
   * ================================================== */
  --app-text-primary: #C2E7FF;    /* Primary text (light blue) */
  --app-text-secondary: #8AB4CF;  /* Secondary text (medium blue) */
  --app-text-tertiary: #6B92AC;   /* Tertiary text, hints (muted blue) - WCAG AA compliant */

  /* ==================================================
   * Borders - Subtle to Emphasis
   * ================================================== */
  --app-border-subtle: rgba(138, 180, 207, 0.1);
  --app-border-default: rgba(138, 180, 207, 0.2);
  --app-border-emphasis: rgba(138, 180, 207, 0.3);

  /* ==================================================
   * Accent Colors - Brand Palette
   * ================================================== */
  --app-accent-blue: #4A9FD8;     /* Primary CTAs, links */
  --app-accent-magenta: #B876C0;  /* Sybil-specific (magenta) */
  --app-accent-magenta-hover: #A85FA8; /* Sybil hover state */
  --app-accent-teal: #52C5C7;     /* Genome-specific (teal) */
  --app-accent-orange: #E89A5F;   /* High-commitment actions */
  --app-accent-green: #6BC070;    /* Success states */
  --app-accent-red: #E76F6F;      /* Errors */
  --app-accent-yellow: #F4C542;   /* Alerts */

  /* ==================================================
   * Semantic Colors - Success
   * ================================================== */
  --app-success-bg: rgba(107, 192, 112, 0.1);
  --app-success-border: rgba(107, 192, 112, 0.3);
  --app-success-text: #6BC070;

  /* ==================================================
   * Semantic Colors - Warning
   * ================================================== */
  --app-warning-bg: rgba(244, 197, 66, 0.1);
  --app-warning-border: rgba(244, 197, 66, 0.3);
  --app-warning-text: #F4C542;

  /* ==================================================
   * Semantic Colors - Error
   * ================================================== */
  --app-error-bg: rgba(231, 111, 111, 0.1);
  --app-error-border: rgba(231, 111, 111, 0.3);
  --app-error-text: #E76F6F;

  /* ==================================================
   * Semantic Colors - Info
   * ================================================== */
  --app-info-bg: rgba(74, 159, 216, 0.1);
  --app-info-border: rgba(74, 159, 216, 0.3);
  --app-info-text: #4A9FD8;

  /* ==================================================
   * Spacing System - 4px Base Unit
   * ================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ==================================================
   * Border Radius - Consistent Rounding
   * ================================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ==================================================
   * Icon Sizes - Standardized
   * ================================================== */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;

  /* ==================================================
   * Shadows - Elevation System
   * ================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

  /* ==================================================
   * Transitions - Motion & Animation Timing
   * ================================================== */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-deliberate: 400ms;
  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==================================================
   * Sybil-Specific Styling (Warm, Conversational Mode)
   * ================================================== */
  /* Warm plum backgrounds for conversational context */
  --sybil-bg-primary: #1a0f24;        /* Very deep warm plum */
  --sybil-bg-surface: #201828;        /* Warm plum for cards/surfaces */
  --sybil-bg-elevated: #2a2235;       /* Slightly lighter warm plum for elevation */
  --sybil-glow: rgba(184, 118, 192, 0.2);   /* Soft magenta glow (20% opacity) */
  --sybil-border: rgba(184, 118, 192, 0.3); /* Magenta-tinted borders */
  --sybil-shadow: 0 4px 20px rgba(184, 118, 192, 0.1); /* Soft shadow with magenta tint */
  --sybil-text: #e8e8ea;              /* Warm off-white for better readability */

  /* ==================================================
   * Genome-Specific Styling (Bright, Scientific Mode)
   * ================================================== */
  /* Lighter, brighter backgrounds for discovery context */
  --genome-bg-primary: #0f2744;       /* 15-20% lighter than base for luminosity */
  --genome-bg-surface: #1a3a5c;       /* Brighter card background */
  --genome-text: #e3f2fd;             /* Brighter, clearer off-white */
  --genome-glow: rgba(82, 197, 199, 0.15); /* Bright teal glow */
  --genome-border: rgba(82, 197, 199, 0.3); /* Teal-tinted borders */
  --genome-shadow: 0 2px 8px rgba(82, 197, 199, 0.08); /* Sharp shadow with teal tint */
}

/* ==================================================
 * Dark Mode Scrollbar
 * ================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--app-bg-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--app-border-default);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--app-border-emphasis);
}

/* ==================================================
 * Focus Ring Styling
 * ================================================== */
*:focus-visible {
  outline: 2px solid var(--app-accent-blue);
  outline-offset: 2px;
}

/* ==================================================
 * Reduce Motion Support
 * ================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================================================
 * Django Form Input Styling (Auto-apply to auth pages)
 * ================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background-color: var(--app-bg-elevated);
  color: var(--app-text-primary);
  border: 1px solid var(--app-border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 16px;
  font-family: inherit;
  transition: all var(--duration-base);
  width: 100%;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="url"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: var(--app-text-tertiary);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--app-accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 159, 216, 0.2);
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--app-bg-surface);
  color: var(--app-text-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Checkbox and Radio Button Styling */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--app-accent-blue);
  cursor: pointer;
}

/* ==================================================
 * Sybil Accent Button Styles
 * ================================================== */
.bg-sybil-accent {
  background-color: var(--app-accent-magenta);
}

.hover\:bg-sybil-accent-hover:hover {
  background-color: var(--app-accent-magenta-hover);
}