/* ═══════════════════════════════════════════════════════════════════════════
 * AuthCore Brand Design Tokens
 * ═══════════════════════════════════════════════════════════════════════════
 * Date: 2026-01-21
 * Purpose: Define brand colors and design tokens for consistent theming
 *
 * These tokens are theme-agnostic. Theme-specific mappings are in themes.css
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
   * BRAND COLORS - Core identity colors
   * ═══════════════════════════════════════════════════════════════════════════ */

  /* Burgundy - Primary brand color (used as accent in light theme) */
  --aspire-burgundy: #8B3A42;
  --aspire-burgundy-light: #A34550;
  --aspire-burgundy-dark: #722F37;
  --aspire-burgundy-darker: #5d252a;
  --aspire-burgundy-subtle: #f5e6e8;
  --aspire-burgundy-rgb: 139, 58, 66;

  /* Blue - Secondary brand color (used as accent in dark theme) */
  --aspire-blue: #3b82f6;
  --aspire-blue-light: #60a5fa;
  --aspire-blue-dark: #2563eb;
  --aspire-blue-darker: #1d4ed8;
  --aspire-blue-subtle: #dbeafe;
  --aspire-blue-rgb: 59, 130, 246;

  /* ═══════════════════════════════════════════════════════════════════════════
   * SEMANTIC COLORS - Status and feedback
   * ═══════════════════════════════════════════════════════════════════════════ */

  --aspire-success: #22c55e;
  --aspire-success-light: #22c55e;
  --aspire-success-dark: #16a34a;

  --aspire-danger: #ef4444;
  --aspire-danger-light: #ef4444;
  --aspire-danger-dark: #dc2626;

  --aspire-warning: #f97316;
  --aspire-warning-light: #f97316;
  --aspire-warning-dark: #ea580c;

  --aspire-info: #0dcaf0;
  --aspire-info-light: #3dd5f3;
  --aspire-info-dark: #0aa2c0;

  /* ═══════════════════════════════════════════════════════════════════════════
   * NEUTRAL COLORS - Backgrounds, borders, text
   * ═══════════════════════════════════════════════════════════════════════════ */

  --aspire-white: #ffffff;
  --aspire-black: #000000;

  /* Light theme neutrals */
  --aspire-gray-50: #f8f9fa;
  --aspire-gray-100: #f1f3f5;
  --aspire-gray-200: #e9ecef;
  --aspire-gray-300: #dee2e6;
  --aspire-gray-400: #ced4da;
  --aspire-gray-500: #adb5bd;
  --aspire-gray-600: #6c757d;
  --aspire-gray-700: #495057;
  --aspire-gray-800: #343a40;
  --aspire-gray-900: #212529;

  /* ═══════════════════════════════════════════════════════════════════════════
   * SPACING SCALE - Consistent spacing throughout the app
   * ═══════════════════════════════════════════════════════════════════════════ */

  --aspire-spacing-0: 0;
  --aspire-spacing-1: 0.25rem;  /* 4px */
  --aspire-spacing-2: 0.5rem;   /* 8px */
  --aspire-spacing-3: 0.75rem;  /* 12px */
  --aspire-spacing-4: 1rem;     /* 16px */
  --aspire-spacing-5: 1.25rem;  /* 20px */
  --aspire-spacing-6: 1.5rem;   /* 24px */
  --aspire-spacing-8: 2rem;     /* 32px */
  --aspire-spacing-10: 2.5rem;  /* 40px */
  --aspire-spacing-12: 3rem;    /* 48px */
  --aspire-spacing-16: 4rem;    /* 64px */
  --aspire-spacing-20: 5rem;    /* 80px */
  --aspire-spacing-24: 6rem;    /* 96px */

  /* ═══════════════════════════════════════════════════════════════════════════
   * TYPOGRAPHY - Font families and sizes
   * ═══════════════════════════════════════════════════════════════════════════ */

  --aspire-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --aspire-font-family-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  --aspire-font-size-xs: 0.75rem;   /* 12px */
  --aspire-font-size-sm: 0.875rem;  /* 14px */
  --aspire-font-size-base: 1rem;    /* 16px */
  --aspire-font-size-lg: 1.125rem;  /* 18px */
  --aspire-font-size-xl: 1.25rem;   /* 20px */
  --aspire-font-size-2xl: 1.5rem;   /* 24px */
  --aspire-font-size-3xl: 1.875rem; /* 30px */
  --aspire-font-size-4xl: 2.25rem;  /* 36px */
  --aspire-font-size-5xl: 3rem;     /* 48px */

  --aspire-font-weight-normal: 400;
  --aspire-font-weight-medium: 500;
  --aspire-font-weight-semibold: 600;
  --aspire-font-weight-bold: 700;

  --aspire-line-height-tight: 1.25;
  --aspire-line-height-normal: 1.5;
  --aspire-line-height-relaxed: 1.75;

  /* ═══════════════════════════════════════════════════════════════════════════
   * BORDERS - Widths and radii
   * ═══════════════════════════════════════════════════════════════════════════ */

  --aspire-border-width-thin: 1px;
  --aspire-border-width-base: 2px;
  --aspire-border-width-thick: 4px;

  --aspire-border-radius-sm: 2px;
  --aspire-border-radius-md: 2px;
  --aspire-border-radius-lg: 2px;
  --aspire-border-radius-xl: 2px;
  --aspire-border-radius-full: 9999px;

  /* ═══════════════════════════════════════════════════════════════════════════
   * SHADOWS - Elevation levels
   * ═══════════════════════════════════════════════════════════════════════════ */

  --aspire-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --aspire-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --aspire-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --aspire-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --aspire-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* ═══════════════════════════════════════════════════════════════════════════
   * TRANSITIONS - Animation timing
   * ═══════════════════════════════════════════════════════════════════════════ */

  --aspire-transition-fast: 0.15s ease;
  --aspire-transition-base: 0.2s ease;
  --aspire-transition-slow: 0.3s ease;

  /* ═══════════════════════════════════════════════════════════════════════════
   * Z-INDEX SCALE - Stacking order
   * ═══════════════════════════════════════════════════════════════════════════ */

  --aspire-z-dropdown: 1000;
  --aspire-z-sticky: 1020;
  --aspire-z-fixed: 1030;
  --aspire-z-modal-backdrop: 1040;
  --aspire-z-modal: 1050;
  --aspire-z-popover: 1060;
  --aspire-z-tooltip: 1070;

  /* ═══════════════════════════════════════════════════════════════════════════
   * BRAND THEME PALETTE (Figma Dark Mode)
   * ═══════════════════════════════════════════════════════════════════════════
   * Date: 2026-01-30
   * Purpose: Define Figma-designed dark burgundy palette for Brand theme mode
   * ═══════════════════════════════════════════════════════════════════════════ */

  /* Brand Primary - Muted Burgundy (Figma .brand) */
  --aspire-brand-main: #3d1111;
  --aspire-brand-main-rgb: 61, 17, 17;
  --aspire-brand-button: #7d2424;       /* Burgundy accent for primary buttons */
  --aspire-brand-button-hover: #8b2942; /* Deeper burgundy for hover state */
  --aspire-brand-border: #6b2020;
  --aspire-brand-border-hover: #7d2424;

  /* Brand Backgrounds */
  --aspire-brand-bg-darkest: #1a0505;
  --aspire-brand-bg-input: #4a1515;
  --aspire-brand-bg-hover: #5c1a1a;
  --aspire-brand-bg-hover-subtle: rgba(92, 26, 26, 0.3);

  /* (Plan 367 Tier 1) The pink-tinted --aspire-brand-text-* set has been removed.
     Brave shell uses --brand-text-* (defined in radzen-overrides.css). The auth
     portal uses its own --auth-* palette in app.css. */

  /* Brand Accent Colors */
  --aspire-brand-gold: #e8d5b7;
  --aspire-brand-gold-hover: #f0e0c8;
  --aspire-brand-star: #facc15;
  --aspire-brand-alert: #f87171;
  --aspire-brand-teal: #2dd4bf;
  --aspire-brand-teal-hover: #14b8a6;

  /* Brand Functional Colors */
  --aspire-brand-success: #4ade80;
  --aspire-brand-warning: #fbbf24;
  --aspire-brand-error: #f87171;
  --aspire-brand-info: #60a5fa;

  /* ═══════════════════════════════════════════════════════════════════════════
   * GLOW EFFECTS (Figma theme.css)
   * ═══════════════════════════════════════════════════════════════════════════
   * Per-theme glow values for focus rings, hover effects, and button glows.
   * ═══════════════════════════════════════════════════════════════════════════ */

  --aspire-glow-light-primary: rgba(37, 99, 235, 0.5);
  --aspire-glow-dark-primary: rgba(59, 156, 255, 0.5);
  --aspire-glow-brand-primary: rgba(232, 213, 183, 0.5);
  --aspire-glow-brand-outline: rgba(139, 41, 66, 0.6);
  --aspire-glow-success: rgba(34, 197, 94, 0.5);
  --aspire-glow-warning: rgba(249, 115, 22, 0.5);
  --aspire-glow-destructive: rgba(239, 68, 68, 0.5);

  /* ═══════════════════════════════════════════════════════════════════════════
   * LIGHT THEME PALETTE (Figma Light Blue)
   * ═══════════════════════════════════════════════════════════════════════════
   * Date: 2026-03-17
   * Purpose: Figma-designed light palette with an off-white page and white
   * elevated surfaces so cards read distinctly from the canvas.
   * ═══════════════════════════════════════════════════════════════════════════ */

  /* Light Backgrounds (Figma :root) */
  --aspire-light-bg: #f8fafc;               /* Soft off-white page background */
  --aspire-light-bg-warm: #f1f5f9;          /* Secondary wash / sunken surfaces */
  --aspire-light-surface: #ffffff;          /* White card and popover background */
  --aspire-light-hover: #eef2f7;            /* Cool light hover bg */

  /* Light Borders (Figma :root) */
  --aspire-light-border: #d1d5db;           /* Standard gray border */
  --aspire-light-border-warm: #e5e7eb;      /* Lighter gray for secondary */
  --aspire-light-border-hover: #9ca3af;     /* Darker gray on hover */

  /* Light Text Colors (Figma :root) */
  --aspire-light-text-primary: #1a1a1a;     /* Near-black */
  --aspire-light-text-secondary: #374151;   /* Dark gray */
  --aspire-light-text-tertiary: #717182;    /* Medium gray (muted) */

  /* Light Accent Colors (Figma :root — blue primary) */
  --aspire-light-accent: #2563eb;           /* Blue - buttons, highlights */
  --aspire-light-accent-secondary: #3b82f6; /* Lighter blue */

  /* ═══════════════════════════════════════════════════════════════════════════
   * DARK THEME PALETTE (Neutral Gray)
   * ═══════════════════════════════════════════════════════════════════════════
   * Date: 2026-02-17
   * Purpose: Neutral dark gray palette as alternative to burgundy Brand theme
   * Uses Material Design neutral grays (no blue tint)
   * ═══════════════════════════════════════════════════════════════════════════ */

  /* Dark Backgrounds (Figma .dark-blue) */
  --aspire-dark-bg: #000000;                /* Pure black page background */
  --aspire-dark-surface: #0a0e1a;           /* Deep navy card/sidebar background */
  --aspire-dark-hover: #1a1f2e;             /* Navy hover background */

  /* Dark Borders (Figma .dark-blue) */
  --aspire-dark-border: #1e3a5f;            /* Navy border */
  --aspire-dark-border-hover: #2d5a8f;      /* Lighter navy on hover */

  /* Dark Text Colors (Figma .dark-blue) */
  --aspire-dark-text-secondary: #e8edf5;    /* Light blue-white for titles */
  --aspire-dark-text-tertiary: #8b94a8;     /* Blue-gray for muted */
  --aspire-dark-text-quaternary: #4a5568;   /* Dark blue-gray for subtle */

  /* ═══════════════════════════════════════════════════════════════════════════
   * STATUS BADGE COLORS
   * ═══════════════════════════════════════════════════════════════════════════
   * Date: 2026-02-03
   * Purpose: Theme-aware badge colors using Tailwind emerald/red scales
   * Rectangular badges with rounded corners (not pill shape)
   * ═══════════════════════════════════════════════════════════════════════════ */

  /* Preferred Badge (Emerald Green) - Light Mode */
  --aspire-badge-preferred-text-light: #047857;     /* emerald-700 */
  --aspire-badge-preferred-bg-light: #d1fae5;       /* emerald-100 */
  --aspire-badge-preferred-border-light: #6ee7b7;   /* emerald-300 */

  /* Preferred Badge (Emerald Green) - Dark/Brand Mode */
  --aspire-badge-preferred-text: #6ee7b7;           /* emerald-300 */
  --aspire-badge-preferred-bg: rgba(2, 44, 34, 0.5);/* emerald-950 @ 50% */
  --aspire-badge-preferred-border: #047857;         /* emerald-700 */

  /* Urgent Badge (Red) - Light Mode */
  --aspire-badge-urgent-text-light: #b91c1c;        /* red-700 */
  --aspire-badge-urgent-bg-light: #fee2e2;          /* red-100 */
  --aspire-badge-urgent-border-light: #fca5a5;      /* red-300 */

  /* Urgent Badge (Red) - Dark/Brand Mode */
  --aspire-badge-urgent-text: #fca5a5;              /* red-300 */
  --aspire-badge-urgent-bg: rgba(69, 10, 10, 0.5);  /* red-950 @ 50% */
  --aspire-badge-urgent-border: #b91c1c;            /* red-700 */

  /* Shared Badge (Burgundy Accent) */
  --aspire-badge-shared-bg-light: #6b1f2d;          /* accent.primary light */
  --aspire-badge-shared-bg: #4d1419;                /* accent.primary dark */
  --aspire-badge-shared-text: #ffffff;
  --aspire-badge-shared-border-light: #6b1f2d;
  --aspire-badge-shared-border: #4d1419;

  /* Private Badge uses theme surface/border/text-secondary - no dedicated tokens needed */

  /* ═══════════════════════════════════════════════════════════════════════════
   * NAVIGATION INTERACTION STATES
   * ═══════════════════════════════════════════════════════════════════════════
   * Date: 2026-03-18
   * Purpose: Tokenized rgba values for dark theme nav and switch controls
   * ═══════════════════════════════════════════════════════════════════════════ */

  --aspire-nav-active-bg: rgba(59, 156, 255, 0.25);
  --aspire-nav-hover-bg: rgba(59, 156, 255, 0.15);
  --aspire-nav-sublevel-active-bg: rgba(59, 156, 255, 0.20);
  --aspire-switch-track-bg: rgba(255, 255, 255, 0.3);
  --aspire-brand-secondary-lighter-25: rgba(77, 20, 25, 0.25);
}