/* ============================================================================
   BrainFusion Web Awesome Custom Theme
   ============================================================================

   This theme overrides Web Awesome's default brand colors to use
   BrainFusion's signature teal (#3ABBA7).

   Color Generation:
   - Primary (Teal): #3ABBA7 (HSL: 171°, 50%, 50%)
   - Secondary (Blue): #052D60 (HSL: 214°, 90%, 20%)
   - Palettes generated using HSL lightness variations
   - Maintains consistent hue and saturation per color
   - Shades range from 98 (lightest) to 10 (darkest)

   ============================================================================ */

:root {
  /* ========================================================================
     Teal Color Palette (Primary) - Scientific HSL-based generation
     ======================================================================== */

  /* Tints (lighter shades) - for backgrounds and subtle elements */
  --bf-teal-98: hsl(171, 50%, 98%);  /* Almost white with teal hint */
  --bf-teal-95: hsl(171, 50%, 95%);  /* Very light teal */
  --bf-teal-90: hsl(171, 50%, 90%);  /* Light teal */
  --bf-teal-85: hsl(171, 50%, 85%);  /* Medium-light teal */
  --bf-teal-80: hsl(171, 50%, 80%);  /* Light-medium teal */
  --bf-teal-70: hsl(171, 50%, 70%);  /* Medium teal (light) */
  --bf-teal-60: hsl(171, 50%, 60%);  /* Medium teal */

  /* Base and core shades */
  --bf-teal-50: #3ABBA7;             /* Brand color (base) */
  --bf-teal-50-hsl: hsl(171, 50%, 50%); /* Brand color (HSL) */

  /* Shades (darker) - for text, borders, and emphasis */
  --bf-teal-45: hsl(171, 50%, 45%);  /* Slightly darker than base */
  --bf-teal-40: hsl(171, 50%, 40%);  /* Medium-dark teal */
  --bf-teal-35: hsl(171, 50%, 35%);  /* Dark teal */
  --bf-teal-30: hsl(171, 50%, 30%);  /* Darker teal */
  --bf-teal-25: hsl(171, 50%, 25%);  /* Very dark teal */
  --bf-teal-20: hsl(171, 50%, 20%);  /* Almost black teal */
  --bf-teal-15: hsl(171, 50%, 15%);  /* Deep teal */
  --bf-teal-10: hsl(171, 50%, 10%);  /* Deepest teal */

  /* Transparent teal variations (for overlays and glassmorphism) */
  --bf-teal-alpha-10: hsla(171, 50%, 50%, 0.10);
  --bf-teal-alpha-20: hsla(171, 50%, 50%, 0.20);
  --bf-teal-alpha-30: hsla(171, 50%, 50%, 0.30);
  --bf-teal-alpha-40: hsla(171, 50%, 50%, 0.40);
  --bf-teal-alpha-50: hsla(171, 50%, 50%, 0.50);

  /* ========================================================================
     Blue Color Palette (Secondary) - Scientific HSL-based generation
     ======================================================================== */

  /* Tints (lighter shades) - for backgrounds and subtle elements */
  --bf-blue-98: hsl(214, 90%, 98%);  /* Almost white with blue hint */
  --bf-blue-95: hsl(214, 90%, 95%);  /* Very light blue */
  --bf-blue-90: hsl(214, 90%, 90%);  /* Light blue */
  --bf-blue-85: hsl(214, 90%, 85%);  /* Medium-light blue */
  --bf-blue-80: hsl(214, 90%, 80%);  /* Light-medium blue */
  --bf-blue-70: hsl(214, 90%, 70%);  /* Medium blue (light) */
  --bf-blue-60: hsl(214, 90%, 60%);  /* Medium blue */
  --bf-blue-50: hsl(214, 90%, 50%);  /* Bright blue */
  --bf-blue-40: hsl(214, 90%, 40%);  /* Medium-dark blue */
  --bf-blue-30: hsl(214, 90%, 30%);  /* Darker blue */

  /* Base and core shades */
  --bf-blue-20: #052D60;             /* Secondary brand color (base) */
  --bf-blue-20-hsl: hsl(214, 90%, 20%); /* Secondary brand color (HSL) */

  /* Shades (darker) - for text, emphasis, and depth */
  --bf-blue-15: hsl(214, 90%, 15%);  /* Deep blue */
  --bf-blue-10: hsl(214, 90%, 10%);  /* Deepest blue */
  --bf-blue-5: hsl(214, 90%, 5%);    /* Nearly black blue */

  /* Transparent blue variations (for overlays and accents) */
  --bf-blue-alpha-10: hsla(214, 90%, 20%, 0.10);
  --bf-blue-alpha-20: hsla(214, 90%, 20%, 0.20);
  --bf-blue-alpha-30: hsla(214, 90%, 20%, 0.30);
  --bf-blue-alpha-40: hsla(214, 90%, 20%, 0.40);
  --bf-blue-alpha-50: hsla(214, 90%, 20%, 0.50);
}

/* ============================================================================
   Light Mode Theme (Default)
   ============================================================================ */

:root,
.wa-light,
.wa-dark .wa-invert,
[data-theme="light"] {
  /* ------------------------------------------------------------------------
     Brand Fill Colors (Backgrounds)
     ------------------------------------------------------------------------ */

  /* Quiet: Very subtle brand presence (e.g., hover states, secondary buttons) */
  --wa-color-brand-fill-quiet: var(--bf-teal-95);

  /* Normal: Standard brand presence (e.g., button backgrounds) */
  --wa-color-brand-fill-normal: var(--bf-teal-90);

  /* Loud: Strong brand presence (e.g., primary buttons, CTAs) */
  --wa-color-brand-fill-loud: var(--bf-teal-50);

  /* ------------------------------------------------------------------------
     Neutral Fill Colors (for neutral badges and components)
     ------------------------------------------------------------------------ */

  /* Override neutral colors to be lighter */
  --wa-color-neutral-fill-quiet: var(--bf-teal-95);
  --wa-color-neutral-fill-normal: var(--bf-teal-90);
  --wa-color-neutral-fill-loud: var(--bf-teal-95);
  --wa-color-neutral-on-quiet: var(--bf-teal-30);
  --wa-color-neutral-on-normal: var(--bf-teal-30);
  --wa-color-neutral-on-loud: var(--bf-teal-30);

  /* ------------------------------------------------------------------------
     Brand Border Colors
     ------------------------------------------------------------------------ */

  /* Quiet: Subtle borders (e.g., outlined buttons at rest) */
  --wa-color-brand-border-quiet: var(--bf-teal-90);

  /* Normal: Standard borders (e.g., outlined buttons, input focus) */
  --wa-color-brand-border-normal: var(--bf-teal-80);

  /* Loud: Prominent borders (e.g., active states, selected items) */
  --wa-color-brand-border-loud: var(--bf-teal-60);

  /* ------------------------------------------------------------------------
     Brand Text Colors (on brand backgrounds)
     ------------------------------------------------------------------------ */

  /* On Quiet: Text on very light brand backgrounds */
  --wa-color-brand-on-quiet: var(--bf-teal-40);

  /* On Normal: Text on light brand backgrounds */
  --wa-color-brand-on-normal: var(--bf-teal-30);

  /* On Loud: Text on saturated brand backgrounds (highest contrast) */
  --wa-color-brand-on-loud: white;

  /* ------------------------------------------------------------------------
     Focus & Interaction Colors
     ------------------------------------------------------------------------ */

  /* Focus ring color (BrainFusion teal) */
  --wa-color-focus: var(--bf-teal-50);

  /* Primary action color (links, interactive elements) */
  --wa-color-primary: var(--bf-teal-50);

  /* Secondary color tokens (for secondary buttons, accents) */
  --wa-color-secondary-fill-quiet: var(--bf-blue-95);
  --wa-color-secondary-fill-normal: var(--bf-blue-90);
  --wa-color-secondary-fill-loud: var(--bf-blue-20);
  --wa-color-secondary-border-quiet: var(--bf-blue-90);
  --wa-color-secondary-border-normal: var(--bf-blue-80);
  --wa-color-secondary-border-loud: var(--bf-blue-60);
  --wa-color-secondary-on-quiet: var(--bf-blue-30);
  --wa-color-secondary-on-normal: var(--bf-blue-20);
  --wa-color-secondary-on-loud: white;
}

/* ============================================================================
   Dark Mode Theme
   ============================================================================ */

.wa-dark,
html[data-theme="dark"],
.wa-light .wa-invert {
  /* ------------------------------------------------------------------------
     Brand Fill Colors (Backgrounds) - Adjusted for dark backgrounds
     ------------------------------------------------------------------------ */

  /* Quiet: Very subtle on dark (lower opacity) */
  --wa-color-brand-fill-quiet: var(--bf-teal-alpha-10);

  /* Normal: Moderate presence on dark */
  --wa-color-brand-fill-normal: var(--bf-teal-alpha-20);

  /* Loud: Full saturation (same as light mode) */
  --wa-color-brand-fill-loud: var(--bf-teal-50);

  /* ------------------------------------------------------------------------
     Brand Border Colors - Higher contrast for dark mode
     ------------------------------------------------------------------------ */

  /* Quiet: Subtle borders with alpha */
  --wa-color-brand-border-quiet: var(--bf-teal-alpha-30);

  /* Normal: Visible borders */
  --wa-color-brand-border-normal: var(--bf-teal-60);

  /* Loud: Bright borders */
  --wa-color-brand-border-loud: var(--bf-teal-70);

  /* ------------------------------------------------------------------------
     Brand Text Colors - Lighter for dark backgrounds
     ------------------------------------------------------------------------ */

  /* On Quiet: Light text on subtle dark backgrounds */
  --wa-color-brand-on-quiet: var(--bf-teal-85);

  /* On Normal: Lighter text on moderate dark backgrounds */
  --wa-color-brand-on-normal: var(--bf-teal-90);

  /* On Loud: White text on saturated backgrounds */
  --wa-color-brand-on-loud: white;

  /* ------------------------------------------------------------------------
     Focus & Interaction Colors (Dark Mode)
     ------------------------------------------------------------------------ */

  /* Focus ring color (BrainFusion teal - lighter for dark mode) */
  --wa-color-focus: var(--bf-teal-60);

  /* Primary action color */
  --wa-color-primary: var(--bf-teal-60);

  /* Secondary color tokens (adjusted for dark backgrounds) */
  --wa-color-secondary-fill-quiet: var(--bf-blue-alpha-10);
  --wa-color-secondary-fill-normal: var(--bf-blue-alpha-20);
  --wa-color-secondary-fill-loud: var(--bf-blue-50);
  --wa-color-secondary-border-quiet: var(--bf-blue-alpha-30);
  --wa-color-secondary-border-normal: var(--bf-blue-60);
  --wa-color-secondary-border-loud: var(--bf-blue-70);
  --wa-color-secondary-on-quiet: var(--bf-blue-85);
  --wa-color-secondary-on-normal: var(--bf-blue-90);
  --wa-color-secondary-on-loud: white;
}

/* ============================================================================
   Component-Specific Customizations
   ============================================================================ */

/* Buttons with brand variant */
wa-button[variant="brand"],
wa-button[variant="primary"] {
  /* Inherits from --wa-color-brand-* tokens automatically */
}

/* Input focus states */
wa-input:focus-within,
wa-textarea:focus-within,
wa-select:focus-within {
  /* Uses --wa-color-focus automatically */
}

/* Checkbox and radio - checked state */
wa-checkbox[checked],
wa-radio[checked] {
  --background-color-checked: var(--bf-teal-50);
  --border-color-checked: var(--bf-teal-50);
}

/* Progress indicators */
wa-progress-bar,
wa-progress-ring {
  --indicator-color: var(--bf-teal-50);
}

/* Spinner */
wa-spinner {
  --indicator-color: var(--bf-teal-50);
}

/* Secondary button variant (using blue) */
wa-button.secondary {
  --background-color: var(--wa-color-secondary-fill-loud);
  --background-color-hover: var(--bf-blue-30);
  --background-color-active: var(--bf-blue-15);
  --color: var(--wa-color-secondary-on-loud);
  --border-color: var(--wa-color-secondary-border-loud);
}

wa-button.secondary[variant="outline"] {
  --background-color: transparent;
  --background-color-hover: var(--wa-color-secondary-fill-normal);
  --color: var(--bf-blue-20);
  --color-hover: var(--bf-blue-30);
  --border-color: var(--wa-color-secondary-border-normal);
}

/* Badges - lighter backgrounds by default */
wa-badge::part(base) {
  background-color: var(--bf-teal-98);
  color: var(--bf-teal-30);
  border-color: var(--bf-teal-90);
}

/* Neutral variant badges - even lighter */
wa-badge[variant="neutral"]::part(base) {
  background-color: var(--bf-teal-98);
  color: var(--bf-teal-30);
  border-color: var(--bf-teal-90);
}

/* Secondary badges and tags */
wa-badge.secondary::part(base),
wa-tag.secondary::part(base) {
  background-color: var(--bf-blue-98);
  color: var(--bf-blue-30);
  border-color: var(--bf-blue-90);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

/* Apply brand color to text */
.bf-brand-text {
  color: var(--bf-teal-50);
}

/* Apply brand color to background */
.bf-brand-bg {
  background-color: var(--bf-teal-50);
  color: white;
}

/* Apply brand color to borders */
.bf-brand-border {
  border-color: var(--bf-teal-50);
}

/* Gradient using teal */
.bf-gradient {
  background: linear-gradient(135deg, var(--bf-teal-50), var(--bf-teal-70));
}

/* Apply secondary (blue) color to text */
.bf-secondary-text {
  color: var(--bf-blue-20);
}

/* Apply secondary (blue) color to background */
.bf-secondary-bg {
  background-color: var(--bf-blue-20);
  color: white;
}

/* Apply secondary (blue) color to borders */
.bf-secondary-border {
  border-color: var(--bf-blue-20);
}

/* Gradient using blue */
.bf-blue-gradient {
  background: linear-gradient(135deg, var(--bf-blue-20), var(--bf-blue-50));
}

/* Gradient combining teal and blue */
.bf-dual-gradient {
  background: linear-gradient(135deg, var(--bf-teal-50), var(--bf-blue-40));
}

/* ============================================================================
   Accessibility Notes
   ============================================================================

   Contrast Ratios (WCAG AA Compliance):
   - Teal 50 (#3ABBA7) on white: 3.2:1 (AA for large text)
   - White on Teal 50: 6.5:1 (AA for normal text)
   - Teal 30 on white: 7.8:1 (AAA for normal text)
   - Teal 40 on Teal 95: 5.2:1 (AA for normal text)

   For best accessibility:
   - Use Teal 30 or darker for text on light backgrounds
   - Use Teal 80+ or white for text on dark backgrounds
   - Maintain 4.5:1 ratio for normal text, 3:1 for large text

   ============================================================================ */