/* ═══════════════════════════════════════════════════════════════════════════
 * AuthCore Theme Overrides
 * ═══════════════════════════════════════════════════════════════════════════
 * Date: 2026-01-22 (Updated: 2026-02-03)
 * Purpose: Map brand tokens to semantic variables based on light/dark/brand theme
 *
 * These variables adapt based on [data-bs-theme] attribute set by RadzenAppearanceToggle
 *
 * Theme Summary:
 * - Light: Clean blue palette with off-white page and white cards
 * - Dark: Neutral gray palette with burgundy accent
 * - Brand: Deep burgundy backgrounds with gold accent (Figma primary)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * DEFAULT THEME (Fallback)
 *
 * If theme attributes are missing, default to light semantics.
 * Theme blocks below will override this for explicit light/dark selections.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Primary accent */
  --aspire-primary: var(--aspire-light-accent);
  --aspire-primary-light: var(--aspire-light-accent-secondary);
  --aspire-primary-dark: var(--aspire-blue-dark);
  --aspire-primary-darker: #1e40af;
  --aspire-primary-subtle: rgba(37, 99, 235, 0.12);

  /* Button outline */
  --aspire-button-outline-bg: transparent;
  --aspire-button-outline-fg: #3b82f6;
  --aspire-button-outline-border: #3b82f6;
  --aspire-button-outline-glow: rgba(59, 130, 246, 0.5);

  /* Surfaces */
  --aspire-surface: var(--aspire-light-bg);
  --aspire-surface-elevated: var(--aspire-light-surface);
  --aspire-surface-sunken: var(--aspire-light-bg);
  --aspire-surface-disabled: var(--aspire-gray-100);
  --aspire-autosave-surface-bg: var(--aspire-surface-elevated);
  --aspire-autosave-surface-border: color-mix(in srgb, var(--aspire-border) 78%, transparent);
  --aspire-surface-hover: var(--aspire-light-hover);
  --aspire-surface-hover-subtle: rgba(var(--aspire-blue-rgb), 0.08);

  /* Text */
  --aspire-text-primary: var(--aspire-light-text-primary);
  --aspire-text-secondary: var(--aspire-light-text-secondary);
  --aspire-text-tertiary: var(--aspire-light-text-tertiary);
  --aspire-text-muted: var(--aspire-light-text-tertiary);
  --aspire-text-disabled: var(--aspire-gray-500);

  /* Borders */
  --aspire-border: var(--aspire-light-border);
  --aspire-border-hover: var(--aspire-light-border-hover);

  /* Accent */
  --aspire-accent: var(--aspire-light-accent);
  --aspire-accent-hover: var(--aspire-light-accent-secondary);
  --aspire-focus-ring: rgba(var(--aspire-blue-rgb), 0.18);

  /* List views */
  --aspire-list-border: var(--aspire-border);
  --aspire-list-surface: var(--aspire-surface-elevated);
  --aspire-list-header-bg: var(--aspire-surface-sunken);
  --aspire-list-header-text: var(--aspire-text-tertiary);
  --aspire-list-text: var(--aspire-text-primary);
  --aspire-list-muted-text: var(--aspire-text-tertiary);
  --aspire-list-row-bg: var(--aspire-surface-elevated);
  --aspire-list-row-alt-bg: color-mix(in srgb, var(--aspire-surface-elevated) 86%, var(--aspire-surface) 14%);
  --aspire-list-row-hover-bg: var(--aspire-surface-hover);
  --aspire-list-divider: color-mix(in srgb, var(--aspire-border) 78%, transparent);
  --aspire-list-action-icon: var(--aspire-accent);
  --aspire-list-action-icon-hover: var(--aspire-accent-hover);

  /* Functional colors */
  --aspire-star: var(--aspire-brand-star);

  /* Glow (semantic — resolves to per-theme raw palette) */
  --aspire-glow-primary: var(--aspire-glow-light-primary);

  /* Popover / Input backgrounds */
  --aspire-popover-bg: var(--aspire-light-bg);
  --aspire-input-bg: transparent;

  /* Foreground pairings (text color for use ON the corresponding background)
   * Convention: --aspire-{role}-foreground pairs with --aspire-{role}
   * Matches Figma/shadcn --primary / --primary-foreground pattern */
  --aspire-primary-foreground: var(--aspire-white);
  --aspire-surface-foreground: var(--aspire-text-primary);
  --aspire-surface-elevated-foreground: var(--aspire-text-primary);
  --aspire-popover-foreground: var(--aspire-text-primary);
  --aspire-accent-foreground: var(--aspire-light-text-primary);
  --aspire-muted-foreground: var(--aspire-text-muted);
  --aspire-destructive-foreground: var(--aspire-white);
  --aspire-success-foreground: var(--aspire-white);
  --aspire-warning-foreground: var(--aspire-white);

  /* Bootstrap surface mapping (keeps Bootstrap cards consistent with AuthCore semantics) */
  --bs-body-bg: var(--aspire-surface);
  --bs-body-color: var(--aspire-text-primary);
  --bs-secondary-color: var(--aspire-text-secondary);
  --bs-tertiary-bg: var(--aspire-surface-elevated);
  --bs-border-color: var(--aspire-border);

  --bs-card-bg: var(--aspire-surface-elevated);
  --bs-card-color: var(--aspire-text-primary);

  --bs-link-color: var(--aspire-primary);
  --bs-link-hover-color: var(--aspire-primary-light);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LIGHT THEME - Clean Blue Palette (Figma reference)
 * ═══════════════════════════════════════════════════════════════════════════
 * Uses a soft off-white canvas, white elevated surfaces, and blue accents.
 * This preserves page/card separation so controls do not look washed out.
 * ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] {
  /* Primary accent - Blue */
  --aspire-primary: var(--aspire-light-accent);
  --aspire-primary-light: var(--aspire-light-accent-secondary);
  --aspire-primary-dark: var(--aspire-blue-dark);
  --aspire-primary-darker: #1e40af;
  --aspire-primary-subtle: rgba(37, 99, 235, 0.12);

  /* Button outline */
  --aspire-button-outline-bg: transparent;
  --aspire-button-outline-fg: #3b82f6;
  --aspire-button-outline-border: #3b82f6;
  --aspire-button-outline-glow: rgba(59, 130, 246, 0.5);

  /* Surfaces - Off-white page with white elevated cards */
  --aspire-surface: var(--aspire-light-bg);
  --aspire-surface-elevated: var(--aspire-light-surface);
  --aspire-surface-sunken: var(--aspire-light-bg-warm);
  --aspire-surface-disabled: var(--aspire-gray-100);
  --aspire-autosave-surface-bg: var(--aspire-surface-elevated);
  --aspire-autosave-surface-border: color-mix(in srgb, var(--aspire-border) 78%, transparent);
  --aspire-surface-hover: var(--aspire-light-hover);
  --aspire-surface-hover-subtle: rgba(var(--aspire-blue-rgb), 0.08);

  /* Text - Neutral dark text on bright surfaces */
  --aspire-text-primary: var(--aspire-light-text-primary);
  --aspire-text-secondary: var(--aspire-light-text-secondary);
  --aspire-text-tertiary: var(--aspire-light-text-tertiary);
  --aspire-text-muted: var(--aspire-light-text-tertiary);
  --aspire-text-disabled: var(--aspire-gray-500);

  /* Borders - Soft burgundy-pink */
  --aspire-border: var(--aspire-light-border);
  --aspire-border-hover: var(--aspire-light-border-hover);

  /* Accent - Blue */
  --aspire-accent: var(--aspire-light-accent);
  --aspire-accent-hover: var(--aspire-light-accent-secondary);
  --aspire-focus-ring: rgba(var(--aspire-blue-rgb), 0.18);

  /* List views */
  --aspire-list-border: #d1d5db;
  --aspire-list-surface: #ffffff;
  --aspire-list-header-bg: #f3f4f6;
  --aspire-list-header-text: #717182;
  --aspire-list-text: #030213;
  --aspire-list-muted-text: #717182;
  --aspire-list-row-bg: #ffffff;
  --aspire-list-row-alt-bg: #f9fafb;
  --aspire-list-row-hover-bg: #f3f4f6;
  --aspire-list-divider: #d1d5db;
  --aspire-list-action-icon: #3b82f6;
  --aspire-list-action-icon-hover: #2563eb;

  /* Functional colors */
  --aspire-star: var(--aspire-brand-star);

  /* Glow (semantic — resolves to per-theme raw palette) */
  --aspire-glow-primary: var(--aspire-glow-light-primary);

  /* Popover / Input backgrounds */
  --aspire-popover-bg: var(--aspire-light-surface);
  --aspire-input-bg: transparent;

  /* Foreground pairings */
  --aspire-primary-foreground: var(--aspire-white);
  --aspire-surface-foreground: var(--aspire-text-primary);
  --aspire-surface-elevated-foreground: var(--aspire-text-primary);
  --aspire-popover-foreground: var(--aspire-text-primary);
  --aspire-accent-foreground: var(--aspire-light-text-primary);
  --aspire-muted-foreground: var(--aspire-text-muted);
  --aspire-destructive-foreground: var(--aspire-white);
  --aspire-success-foreground: var(--aspire-white);
  --aspire-warning-foreground: var(--aspire-white);

  /* Bootstrap surface mapping */
  --bs-body-bg: var(--aspire-surface);
  --bs-body-color: var(--aspire-text-primary);
  --bs-secondary-color: var(--aspire-text-secondary);
  --bs-tertiary-bg: var(--aspire-surface-elevated);
  --bs-border-color: var(--aspire-border);

  --bs-card-bg: var(--aspire-surface-elevated);
  --bs-card-color: var(--aspire-text-primary);

  --bs-link-color: var(--aspire-primary);
  --bs-link-hover-color: var(--aspire-primary-light);

  /* Color scheme hint for browser */
  color-scheme: light;

  /* Explicit background — guarantees correct color during SSR before Radzen CSS loads */
  background-color: var(--aspire-light-bg, #ffffff);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DARK THEME - Figma Dark-Blue Palette (Updated 2026-03-11)
 * ═══════════════════════════════════════════════════════════════════════════
 * Pure black bg with cyan-blue primary and navy accents.
 * Matches Figma .dark-blue theme in Designcontextforcontactapp.
 * ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
  /* Primary accent - Cyan-Blue (Figma .dark-blue --primary: #3b9cff) */
  --aspire-primary: #3b9cff;
  --aspire-primary-light: #60b4ff;
  --aspire-primary-dark: #2d7acc;
  --aspire-primary-darker: #175bb0;
  --aspire-primary-subtle: rgba(59, 156, 255, 0.12);

  /* Button outline */
  --aspire-button-outline-bg: #000000;
  --aspire-button-outline-fg: #3b9cff;
  --aspire-button-outline-border: #3b9cff;
  --aspire-button-outline-glow: rgba(59, 156, 255, 0.6);

  /* Surfaces - Neutral dark grays */
  --aspire-surface: var(--aspire-dark-bg);
  --aspire-surface-elevated: var(--aspire-dark-surface);
  --aspire-surface-sunken: #050810;
  --aspire-surface-disabled: #0f1419;
  --aspire-autosave-surface-bg: var(--aspire-surface-elevated);
  --aspire-autosave-surface-border: color-mix(in srgb, var(--aspire-border) 78%, transparent);
  --aspire-surface-hover: var(--aspire-dark-hover);
  --aspire-surface-hover-subtle: rgba(59, 156, 255, 0.08);

  /* Text - Light blue-whites (Figma .dark-blue) */
  --aspire-text-primary: #e8edf5;
  --aspire-text-secondary: var(--aspire-dark-text-secondary);
  --aspire-text-tertiary: var(--aspire-dark-text-tertiary);
  --aspire-text-muted: var(--aspire-dark-text-tertiary);
  --aspire-text-disabled: var(--aspire-dark-text-quaternary);

  /* Borders - Medium grays */
  --aspire-border: var(--aspire-dark-border);
  --aspire-border-hover: var(--aspire-dark-border-hover);

  /* Accent - Cyan-Blue (Figma .dark-blue) */
  --aspire-accent: #3b9cff;
  --aspire-accent-hover: #60b4ff;
  --aspire-focus-ring: rgba(59, 156, 255, 0.28);

  /* List views */
  --aspire-list-border: #243246;
  --aspire-list-surface: #000000;
  --aspire-list-header-bg: #08111d;
  --aspire-list-header-text: #8b94a8;
  --aspire-list-text: #e8edf5;
  --aspire-list-muted-text: #8b94a8;
  --aspire-list-row-bg: #000000;
  --aspire-list-row-alt-bg: #0a0e1a;
  --aspire-list-row-hover-bg: #132033;
  --aspire-list-divider: rgba(143, 163, 191, 0.22);
  --aspire-list-action-icon: #3b9cff;
  --aspire-list-action-icon-hover: #5aaeff;

  /* Functional colors */
  --aspire-star: var(--aspire-brand-star);

  /* Glow (semantic — resolves to per-theme raw palette) */
  --aspire-glow-primary: var(--aspire-glow-dark-primary);

  /* Popover / Input backgrounds */
  --aspire-popover-bg: var(--aspire-dark-surface);
  --aspire-input-bg: var(--aspire-dark-surface);

  /* Foreground pairings */
  --aspire-primary-foreground: var(--aspire-white);
  --aspire-surface-foreground: var(--aspire-text-primary);
  --aspire-surface-elevated-foreground: #e8edf5;
  --aspire-popover-foreground: #e8edf5;
  --aspire-accent-foreground: var(--aspire-white);
  --aspire-muted-foreground: var(--aspire-text-muted);
  --aspire-destructive-foreground: var(--aspire-white);
  --aspire-success-foreground: var(--aspire-white);
  --aspire-warning-foreground: var(--aspire-white);

  /* Bootstrap surface mapping */
  --bs-body-bg: var(--aspire-surface);
  --bs-body-color: var(--aspire-text-primary);
  --bs-secondary-color: var(--aspire-text-secondary);
  --bs-tertiary-bg: var(--aspire-surface-elevated);
  --bs-border-color: var(--aspire-border);

  --bs-card-bg: var(--aspire-surface-elevated);
  --bs-card-color: var(--aspire-text-primary);

  --bs-link-color: var(--aspire-primary);
  --bs-link-hover-color: var(--aspire-primary-light);

  /* Color scheme hint for browser */
  color-scheme: dark;

  /* Explicit background — guarantees correct color during SSR before Radzen CSS loads */
  background-color: var(--aspire-dark-bg, #000000);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BRAND THEME - Figma Dark Burgundy Palette (Updated 2026-03-11)
 * ═══════════════════════════════════════════════════════════════════════════
 * Matches Figma .brand theme in Designcontextforcontactapp.
 * Deep burgundy backgrounds with cream/champagne primary.
 * ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="brand"] {
  /* Primary colors - Brand interaction accent (cream/champagne) */
  --aspire-primary: var(--aspire-brand-gold);
  --aspire-primary-light: var(--aspire-brand-gold-hover);
  --aspire-primary-dark: var(--aspire-brand-gold);
  --aspire-primary-darker: #b29063;
  --aspire-primary-subtle: rgba(232, 213, 183, 0.12);

  /* Button outline */
  --aspire-button-outline-bg: transparent;
  --aspire-button-outline-fg: #e8d5b7;
  --aspire-button-outline-border: #8b2942;
  --aspire-button-outline-glow: rgba(139, 41, 66, 0.6);

  /* Surfaces - Brand background hierarchy */
  --aspire-surface: var(--aspire-brand-bg-darkest);
  --aspire-surface-elevated: var(--aspire-brand-bg-input);
  --aspire-surface-sunken: var(--aspire-brand-main);
  --aspire-surface-disabled: var(--aspire-brand-bg-hover);
  --aspire-autosave-surface-bg: var(--brand-chrome);
  --aspire-autosave-surface-border: var(--brand-border-soft);
  /* Plan 366 follow-up: --aspire-surface-hover is the generic neutral hover affordance
     consumed by every BlazorUI primitive (ThemeIconButton, ThemeCard, ThemeStatusBadge,
     ThemeTagEditor, ThemeProblemDetails, …). Mapping it to --aspire-brand-bg-hover
     (#5c1a1a) tints every hovered icon button and card burgundy on the brand canvas,
     which violates BRAND_DESIGN_SYSTEM.md §2 Rule #3 (no per-page accent on neutral
     surfaces). Use the monochrome --brand-surface-hover (#1a1a1d) instead. The brand
     burgundy hover is still available via --aspire-brand-bg-hover for surfaces that
     opt in explicitly (e.g. --rz-base-200, list rows). */
  --aspire-surface-hover: var(--brand-surface-hover);
  --aspire-surface-hover-subtle: color-mix(in srgb, var(--brand-text), transparent 92%);

  /* Text - Brand monochrome text. Use the --brand-text-* set defined in
     radzen-overrides.css; do not reintroduce pink-tinted aliases. */
  --aspire-text-primary: var(--brand-text);
  --aspire-text-heading: var(--brand-text);
  --aspire-text-secondary: var(--brand-text-idle);
  --aspire-text-tertiary: var(--brand-text-dim);
  --aspire-text-muted: var(--brand-text-muted);
  --aspire-text-placeholder: var(--brand-text-dim);
  --aspire-text-disabled: var(--brand-text-dim);

  /* Borders - Brand border colors */
  --aspire-border: var(--aspire-brand-border);
  --aspire-border-hover: var(--aspire-brand-border-hover);

  /* Accent colors - Brand gold */
  --aspire-accent: var(--aspire-brand-gold);
  --aspire-accent-hover: var(--aspire-brand-gold-hover);
  --aspire-focus-ring: var(--aspire-glow-brand-primary);
  --aspire-star: var(--aspire-brand-star);
  --aspire-alert: var(--aspire-brand-alert);

  /* List views */
  --aspire-list-border: var(--aspire-brand-border);
  --aspire-list-surface: #1a0505;
  --aspire-list-header-bg: #3d1111;
  --aspire-list-header-text: var(--brand-text-muted);
  --aspire-list-text: var(--brand-text);
  --aspire-list-muted-text: var(--brand-text-dim);
  --aspire-list-row-bg: #1a0505;
  --aspire-list-row-alt-bg: #2a0808;
  --aspire-list-row-hover-bg: #3d1111;
  --aspire-list-divider: rgba(159, 123, 127, 0.35);
  --aspire-list-action-icon: #e8d5b7;
  --aspire-list-action-icon-hover: #f0e5d5;

  /* Functional colors - Brand palette */
  --aspire-success: var(--aspire-brand-success);
  --aspire-warning: var(--aspire-brand-warning);
  --aspire-danger: var(--aspire-brand-error);
  --aspire-info: var(--aspire-brand-info);

  /* Glow (semantic — resolves to per-theme raw palette) */
  --aspire-glow-primary: var(--aspire-glow-brand-primary);

  /* Popover / Input backgrounds */
  --aspire-popover-bg: var(--aspire-brand-bg-input);
  --aspire-input-bg: var(--aspire-brand-main);

  /* Foreground pairings */
  --aspire-primary-foreground: var(--aspire-brand-bg-darkest);
  --aspire-surface-foreground: var(--aspire-text-primary);
  --aspire-surface-elevated-foreground: var(--brand-text);
  --aspire-popover-foreground: var(--brand-text);
  --aspire-accent-foreground: var(--aspire-brand-bg-darkest);
  --aspire-muted-foreground: var(--aspire-text-muted);
  --aspire-destructive-foreground: var(--aspire-white);
  --aspire-success-foreground: var(--aspire-white);
  --aspire-warning-foreground: var(--aspire-white);

  /* Bootstrap surface mapping */
  --bs-body-bg: var(--aspire-surface);
  --bs-body-color: var(--aspire-text-primary);
  --bs-secondary-color: var(--aspire-text-secondary);
  --bs-tertiary-bg: var(--aspire-surface-elevated);
  --bs-border-color: var(--aspire-border);

  --bs-card-bg: var(--aspire-surface-elevated);
  --bs-card-color: var(--aspire-text-primary);

  --bs-link-color: var(--aspire-accent);
  --bs-link-hover-color: var(--aspire-accent-hover);

  /* Color scheme hint for browser */
  color-scheme: dark;

  /* Explicit background — guarantees correct color during SSR before Radzen CSS loads */
  background-color: var(--aspire-brand-bg-darkest, #1a0505);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * OS PREFERENCE FALLBACK
 *
 * Safety net for edge case where theme-sync.js hasn't run yet.
 * Respects OS dark mode preference when no explicit theme attribute exists.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme]):not(:has(body[data-bs-theme])) {
    --aspire-surface: var(--aspire-black);
    --aspire-surface-elevated: var(--aspire-gray-900);
    --aspire-text-primary: var(--aspire-white);
    --aspire-text-secondary: var(--aspire-gray-400);
    --aspire-border: var(--aspire-gray-700);

    --bs-body-bg: var(--aspire-surface);
    --bs-body-color: var(--aspire-text-primary);
    --bs-secondary-color: var(--aspire-text-secondary);
    --bs-tertiary-bg: var(--aspire-surface-elevated);
    --bs-border-color: var(--aspire-border);
    --bs-card-bg: var(--aspire-surface-elevated);
    --bs-card-color: var(--aspire-text-primary);
  }
}