/* ==========================================================================
   Component Library Design Tokens
   Core variables for the anySKU component library

   Typography: Plus Jakarta Sans - geometric, modern, characterful
   Aesthetic: Precision Craft - clean but not sterile, professional with character
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ========================================
       BRAND COLORS
       ======================================== */
    --color-primary: rgb(92, 67, 244);
    --color-primary-rgb: 92, 67, 244;
    --color-primary-dark: rgb(60, 45, 180);
    --color-primary-darker: rgb(35, 25, 105);
    --color-primary-light: rgba(92, 67, 244, 0.15);
    --color-primary-lighter: rgba(92, 67, 244, 0.08);
    --color-primary-light-solid: rgb(167, 139, 250);   /* Solid light violet for dark mode text */
    --color-primary-muted: rgba(92, 67, 244, 0.5);
    --color-primary-hover: rgb(75, 55, 220);
    --color-primary-hover-bg: rgba(92, 67, 244, 0.08);
    --color-secondary: rgb(0, 255, 203);
    --color-secondary-rgb: 0, 255, 203;
    --color-secondary-dark: rgb(0, 180, 165);
    --color-secondary-darker: rgb(0, 120, 95);
    --color-secondary-light: rgba(0, 255, 203, 0.2);
    --color-secondary-muted: rgba(0, 255, 203, 0.5);
    --color-accent: rgb(227, 0, 32);
    --color-accent-light: rgba(227, 0, 32, 0.1);
    /* ========================================
       SEMANTIC COLORS
       ======================================== */
    --color-success: rgb(16, 185, 129);
    --color-success-rgb: 16, 185, 129;
    --color-success-dark: rgb(5, 150, 105);
    --color-success-light: rgba(16, 185, 129, 0.15);
    --color-success-muted: rgba(16, 185, 129, 0.5);
    --color-warning: rgb(245, 158, 11);
    --color-warning-rgb: 245, 158, 11;
    --color-warning-dark: rgb(180, 83, 9);
    --color-warning-light: rgba(245, 158, 11, 0.15);
    --color-warning-lighter: rgba(245, 158, 11, 0.05);
    --color-warning-muted: rgba(245, 158, 11, 0.3);
    --color-warning-tint: rgba(255, 243, 205, 0.5);
    --color-warning-text: rgb(180, 83, 9);
    --color-error: rgb(239, 68, 68);
    --color-error-rgb: 239, 68, 68;
    --color-error-dark: rgb(185, 28, 28);
    --color-error-light: rgba(239, 68, 68, 0.15);
    --color-error-light-solid: rgb(248, 113, 113);   /* Solid light red for dark mode text */
    --color-info: rgb(59, 130, 246);
    --color-info-rgb: 59, 130, 246;
    --color-info-dark: rgb(29, 78, 216);
    --color-info-light: rgba(59, 130, 246, 0.15);
    /* ========================================
       TEXT COLORS
       ======================================== */
    --color-text: rgb(0, 0, 0);
    --color-text-light: rgb(51, 51, 51);
    --color-text-muted: rgb(136, 136, 136);
    --color-primary-on-dark: rgba(255, 255, 255, 0.95);
    /* Warm text colors — violet-tinted darks per style guide */
    --color-text-warm: rgba(30, 25, 55, 0.88);           /* Headings, emphasis */
    --color-text-warm-medium: rgba(30, 25, 55, 0.78);    /* Section titles */
    --color-text-warm-body: rgba(30, 25, 55, 0.72);      /* Body text, labels */
    --color-text-warm-muted: rgba(30, 25, 55, 0.6);      /* Captions, hints */
    /* ========================================
       BACKGROUND & SURFACE COLORS
       ======================================== */
    --color-white: rgb(255, 255, 255);
    --color-black: rgb(0, 0, 0);
    --color-background: rgb(255, 255, 255);
    --color-background-alt: rgb(248, 249, 250);
    --color-background-darkened: rgb(242, 243, 244);
    --color-surface: rgb(248, 249, 252);
    --color-surface-light: rgba(248, 249, 252, 0.7);
    --color-surface-darkened: rgb(238, 240, 244);
    --color-surface-subtle: rgba(248, 249, 252, 0.5);
    --color-surface-elevated: rgb(255, 255, 255);
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-overlay-light: rgba(0, 0, 0, 0.3);
    /* Semantic state surfaces — tinted backgrounds for status indication */
    --color-surface-primary-tint: rgba(250, 248, 255, 1);       /* Violet-tinted white */
    --color-surface-primary-tint-rgb: 250, 248, 255;            /* RGB for alpha variations */
    --color-surface-primary-tint-medium: rgba(245, 243, 255, 1); /* Stronger violet tint */
    --color-surface-primary-tint-medium-rgb: 245, 243, 255;     /* RGB for alpha variations */
    --color-state-success-bg: rgba(var(--color-success-rgb), 0.06);
    --color-state-success-border: rgba(var(--color-success-rgb), 0.15);
    --color-state-warning-bg: rgba(var(--color-warning-rgb), 0.06);
    --color-state-warning-border: rgba(var(--color-warning-rgb), 0.15);
    --color-state-error-bg: rgba(var(--color-error-rgb), 0.06);
    --color-state-error-border: rgba(var(--color-error-rgb), 0.15);
    --color-state-info-bg: rgba(var(--color-info-rgb), 0.06);
    --color-state-info-border: rgba(var(--color-info-rgb), 0.15);
    --color-state-muted-bg: rgba(107, 114, 128, 0.06);
    --color-state-muted-border: rgba(107, 114, 128, 0.15);
    /* Disabled state colors */
    --color-disabled-bg: rgba(0, 0, 0, 0.75);
    --color-disabled-text: rgba(255, 255, 255, 0.5);
    --color-disabled-border: rgba(0, 0, 0, 0.15);
    --color-disabled-text-light: rgba(0, 0, 0, 0.5);
    /* ========================================
       BORDER COLORS
       ======================================== */
    --color-border: rgba(0, 0, 0, 0.1);
    --color-border-medium: rgba(0, 0, 0, 0.15);
    --color-border-semi: rgba(0, 0, 0, 0.5);
    --color-border-dark: rgba(0, 0, 0, 0.7);
    --color-border-heavy: rgba(0, 0, 0, 0.9);
    --color-border-light: #e1e5e9;
    --color-border-accent: rgba(0, 255, 203, 0.75);
    --color-border-accent-muted: rgba(0, 255, 203, 0.35);
    --color-border-primary-subtle: rgba(92, 67, 244, 0.15);
    --color-border-primary-faint: rgba(92, 67, 244, 0.06);
    --color-border-primary-light: rgba(92, 67, 244, 0.1);
    --color-primary-bg-subtle: rgba(92, 67, 244, 0.02);
    --color-primary-bg-light: rgba(92, 67, 244, 0.03);
    --color-primary-bg-tint: rgba(92, 67, 244, 0.04);
    --color-primary-bg-faint: rgba(92, 67, 244, 0.015);
    --color-primary-border-soft: rgba(92, 67, 244, 0.2);
    --color-primary-border-medium: rgba(92, 67, 244, 0.3);
    /* ========================================
       SHADOW COLOR
       ======================================== */
    --color-shadow: rgba(0, 0, 0, 0.063);
    /* ========================================
       GLASS EFFECTS
       ======================================== */
    --color-glass: rgba(255, 255, 255, 0.15);
    --color-glass-primary: rgba(62, 77, 255, 0.15);
    --color-glass-normal: rgba(255, 255, 255, 0.32);
    --color-glass-medium: rgba(255, 255, 255, 0.5);
    --color-glass-semi: rgba(255, 255, 255, 0.67);
    --color-glass-heavy: rgba(255, 255, 255, 0.85);
    /* ========================================
       GRADIENTS
       ======================================== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-primary-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 70%, var(--color-secondary) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --gradient-warm: linear-gradient(135deg, rgb(239, 68, 68) 0%, rgb(245, 158, 11) 100%);
    --gradient-cool: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(6, 182, 212) 100%);
    --gradient-hero: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%);
    --gradient-banner: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-surface: linear-gradient(180deg, var(--color-surface) 0%, var(--color-background) 100%);
    --gradient-overlay-dark: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    --gradient-overlay-primary: linear-gradient(to top, rgba(92, 67, 244, 0.9) 0%, transparent 100%);
    /* Signature gradients - diagonal accent motif */
    --gradient-diagonal-accent: linear-gradient(135deg, rgba(92, 67, 244, 0.08) 0%, transparent 60%);
    --gradient-diagonal-secondary: linear-gradient(135deg, rgba(0, 255, 203, 0.06) 0%, transparent 60%);
    --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
    --gradient-border-glow: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    /* Surface gradients for depth */
    --gradient-card-surface: linear-gradient(180deg, var(--color-background) 0%, var(--color-surface) 100%);
    --gradient-card-hover: linear-gradient(135deg, rgba(92, 67, 244, 0.03) 0%, rgba(0, 255, 203, 0.02) 100%);
    --gradient-surface-branded: linear-gradient(135deg, rgba(92, 67, 244, 0.06) 0%, rgba(0, 255, 203, 0.03) 50%, var(--color-surface) 100%);
    --gradient-card-base: linear-gradient(160deg, var(--color-background) 0%, var(--color-surface) 100%);
    --gradient-footer-warm: linear-gradient(180deg, var(--color-surface) 0%, var(--color-primary-bg-faint) 100%);
    /* Tint gradients — subtle directional fills replacing border-left indicators */
    --gradient-tint-primary: linear-gradient(90deg, rgba(92, 67, 244, 0.08) 0%, rgba(92, 67, 244, 0.02) 100%);
    --gradient-tint-success: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    --gradient-tint-warning: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%);
    --gradient-tint-error: linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%);
    --gradient-tint-info: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%);
    --gradient-tint-secondary: linear-gradient(90deg, rgba(0, 255, 203, 0.06) 0%, rgba(0, 255, 203, 0.02) 100%);
    --gradient-tint-neutral: linear-gradient(90deg, var(--color-surface-darkened) 0%, var(--color-surface) 100%);
    /* Surface tints — diagonal fills for sections, cards, blockquotes */
    --gradient-surface-primary: linear-gradient(160deg, rgba(92, 67, 244, 0.03) 0%, var(--color-background) 100%);
    --gradient-surface-primary-strong: linear-gradient(160deg, rgba(92, 67, 244, 0.04) 0%, var(--color-surface) 100%);
    --gradient-surface-secondary: linear-gradient(160deg, rgba(0, 255, 203, 0.04) 0%, var(--color-background) 100%);
    /* Canvas backgrounds — full page warm gradients for special pages */
    --gradient-canvas-warm: linear-gradient(160deg, rgba(92, 67, 244, 0.04) 0%, rgba(251, 146, 60, 0.02) 50%, var(--color-background) 100%);
    --gradient-canvas-settings: linear-gradient(180deg, rgba(92, 67, 244, 0.035) 0%, rgba(92, 67, 244, 0.015) 30%, rgba(0, 255, 203, 0.012) 70%, rgba(92, 67, 244, 0.008) 100%);
    /* Section backgrounds — glass-card effect for grouped content */
    --color-section-glass: rgba(255, 255, 255, 0.6);
    --color-section-glass-border: rgba(255, 255, 255, 0.8);
    /* ========================================
       TYPOGRAPHY
       ======================================== */
    /* Plus Jakarta Sans: geometric, modern, characterful - avoids generic AI aesthetics */
    --font-family-display: 'Inter', "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
    --font-family-base: 'Inter', "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
    --font-family-mono: "JetBrains Mono", "Fira Code", monospace;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    /* Font Sizes - rem scales with user's browser settings */
    --font-size-xs: 0.75rem; /* 12px - smallest readable */
    --font-size-sm: 0.875rem; /* 14px - notes, tips, captions */
    --font-size-base: 1rem; /* 16px - base body text */
    --font-size-md: 1.0625rem; /* 17px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-xxl: 1.375rem; /* 22px */
    --font-size-h3: 1.125rem; /* 18px */
    --font-size-h2: 1.5rem; /* 24px */
    --font-size-h1: 2rem; /* 32px */
    /* Line Heights */
    --line-height-base: 1.5;
    --line-height-tight: 1.25;
    --line-height-compact: 1.2;
    /* ========================================
       SPACING
       ======================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 40px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    /* ========================================
       BORDER RADIUS
       ======================================== */
    --border-radius-sm: 3px;
    --border-radius-md: 10px;
    --border-radius-lg: 20px;
    --border-radius-xl: 24px;
    --border-radius-full: 100px;
    --border-radius-button: 8px;
    --border-radius-card: 16px;
    /* ========================================
       SHADOWS
       ======================================== */
    /* Elevation levels - subtle to dramatic */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* Component-specific shadows */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 16px 32px rgba(92, 67, 244, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
    --shadow-card-lifted: 0 24px 48px rgba(92, 67, 244, 0.15), 0 12px 24px rgba(0, 0, 0, 0.08);
    --shadow-button: 0 4px 14px rgba(92, 67, 244, 0.35);
    --shadow-button-hover: 0 8px 24px rgba(92, 67, 244, 0.5);
    --shadow-fixed: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.2);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    /* Glow effects - signature accent */
    --shadow-glow-primary: 0 0 24px rgba(92, 67, 244, 0.4);
    --shadow-glow-primary-soft: 0 0 40px rgba(92, 67, 244, 0.2);
    --shadow-glow-secondary: 0 0 24px rgba(0, 255, 203, 0.4);
    --shadow-glow-secondary-soft: 0 0 40px rgba(0, 255, 203, 0.2);
    --shadow-glow-combined: 0 0 30px rgba(92, 67, 244, 0.3), 0 0 60px rgba(0, 255, 203, 0.15);
    /* Ambient shadows - color-tinted depth */
    --shadow-ambient-primary: 0 8px 30px rgba(92, 67, 244, 0.15);
    --shadow-ambient-surface: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-glow-success: 0 2px 8px rgba(16, 185, 129, 0.3);
    /* Focus ring shadows — accessible focus indicators */
    --shadow-focus-ring: 0 0 0 3px var(--color-primary-light);
    --shadow-focus-ring-sm: 0 0 0 2px var(--color-primary-light);
    --shadow-focus-ring-lg: 0 0 0 4px var(--color-primary-light);
    --shadow-outline-primary: 0 0 0 1px var(--color-primary-border-soft);
    /* ========================================
       Z-INDEX LAYERS
       ======================================== */
    --z-index-dropdown: 10;
    --z-index-sticky: 100;
    --z-index-fixed: 200;
    --z-index-modal-backdrop: 250;
    --z-index-modal: 251;
    --z-index-tooltip: 1000;
    --z-index-hud: 2000;
    /* ========================================
       TRANSITIONS & ANIMATIONS
       ======================================== */
    /* Timing functions - refined for precision craft aesthetic */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-elegant: cubic-bezier(0.23, 1, 0.32, 1);
    /* Duration-based transitions */
    --transition-instant: 0.1s var(--ease-out);
    --transition-fast: 0.15s var(--ease-out);
    --transition-base: 0.2s var(--ease-in-out);
    --transition-medium: 0.3s var(--ease-elegant);
    --transition-slow: 0.4s var(--ease-elegant);
    --transition-slower: 0.5s var(--ease-elegant);
    /* Property-specific transitions */
    --transition-colors: color 0.15s var(--ease-out), background-color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
    --transition-transform: transform 0.3s var(--ease-elegant);
    --transition-opacity: opacity 0.2s var(--ease-out);
    --transition-shadow: box-shadow 0.3s var(--ease-elegant);
    --transition-all: all 0.3s var(--ease-elegant);
    /* Signature transitions - for cards/components */
    --transition-card: all 0.35s var(--ease-elegant);
    --transition-card-photo: transform 0.5s var(--ease-elegant);
    --transition-lift: transform 0.3s var(--ease-elegant), box-shadow 0.3s var(--ease-elegant);
    --transition-glow: box-shadow 0.4s var(--ease-elegant), border-color 0.3s var(--ease-out);
    /* ========================================
       LAYOUT
       ======================================== */
    --container-max-width: 1400px;
    /* ========================================
       FORM ELEMENTS
       ======================================== */
    --form-input-height: 40px;
    --form-input-padding: 16px;
    --color-form-border: rgb(30, 30, 30);
    --color-form-error: #e73b3b;
    --color-form-valid: #eafbeb;
    /* ========================================
       RICH TEXT EDITOR
       ======================================== */
    --rich-text-editor-min-height: 300px;
    --rich-text-editor-button-size: 32px;
    --rich-text-editor-button-font-size: 14px;
    --rich-text-editor-toolbar-bg: var(--color-surface);
    --rich-text-editor-toolbar-border: var(--color-border);
    --rich-text-editor-content-bg: var(--color-background);
    --rich-text-editor-textarea-offset-top: 0;
    --rich-text-editor-textarea-offset-left: 0;
    --rich-text-editor-textarea-offset-right: 0;
    /* ========================================
       BUTTONS
       ======================================== */
    --button-height-sm: 25px;
    --button-height-md: 30px;
    --button-height-lg: 40px;
    --button-padding-sm: 0 15px;
    --button-padding-md: 5px 20px;
    --button-padding-lg: 10px 25px;
    /* ========================================
       ICONS
       ======================================== */
    --icon-size-xs: 14px;
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;
    --icon-size-xl: 32px;
    --icon-size-xxl: 48px;
    --icon-size-feature: 64px;
    /* ========================================
       BREAKPOINTS (for reference in JS)
       ======================================== */
    --breakpoint-mobile: 760px;
    --breakpoint-tablet: 850px;
    --breakpoint-small: 600px;
    /* ========================================
       DIALOG/MODAL
       ======================================== */
    --color-dialog-background: rgb(255, 255, 255);
    --color-dialog-backdrop: rgba(100, 18, 105, 0.95);
    --color-dialog-backdrop-dark: rgba(58, 18, 106, 0.95);
    --color-dialog-backdrop-blur: rgba(0, 0, 0, 0.196);
    --color-dialog-backdrop-secondary: rgba(9, 0, 25, 0.384);
    --color-dialog-border: rgb(238, 239, 255);
    --color-dialog-shadow: rgba(0, 0, 0, 0.3);
    --color-dialog-overlay: rgba(255, 255, 255, 0.85);
    --dialog-padding: var(--spacing-lg);
    --dialog-margin: var(--spacing-lg);
    --dialog-workspace-width: 800px;
    --dialog-change-form-width: 320px;
    --dialog-manage-width: 400px;
    --dialog-header-height: 45px;
    --z-index-dialog-busy: 21000;
    --z-index-dialog-stack: 21002;
    --z-index-dialog-manage: 21003;
    /* ========================================
       AUTOCOMPLETE
       ======================================== */
    --color-autocomplete-bg: rgb(250, 250, 250);
    --color-autocomplete-active: rgb(31, 141, 214);
    --color-autocomplete-highlight: rgb(31, 141, 214);
    --color-autocomplete-border: rgba(0, 0, 0, 0.15);
    --autocomplete-padding: 7px;

    /* ========================================
       CELEBRATION & GAMIFICATION
       Reusable tokens for achievements, milestones,
       auth success, leaderboards, and progress displays.
       See gamify-plan.md for design guidelines.
       ======================================== */

    /* Celebration surfaces */
    --color-celebration-surface: rgba(255, 255, 255, 0.97);
    --color-celebration-surface-glass: rgba(255, 255, 255, 0.85);
    --color-celebration-surface-glass-light: rgba(255, 255, 255, 0.15);

    /* Celebration shadows - violet-tinted with ambient glow */
    --shadow-celebration-card:
        0 4px 24px rgba(92, 67, 244, 0.12),
        0 12px 48px rgba(92, 67, 244, 0.08),
        0 0 0 1px rgba(92, 67, 244, 0.05);
    --shadow-celebration-card-hover:
        0 8px 32px rgba(92, 67, 244, 0.18),
        0 24px 64px rgba(92, 67, 244, 0.12),
        0 0 0 1px rgba(92, 67, 244, 0.08);

    /* Ambient glow for celebration moments (achievements, milestones, level ups) */
    --shadow-celebration-glow:
        0 0 60px rgba(92, 67, 244, 0.25),
        0 0 120px rgba(0, 255, 203, 0.1);
    --shadow-celebration-glow-intense:
        0 0 40px rgba(92, 67, 244, 0.4),
        0 0 80px rgba(92, 67, 244, 0.2),
        0 0 120px rgba(0, 255, 203, 0.15);

    /* Hero number gradient (position displays, XP counters, leaderboard ranks) */
    --gradient-celebration-number: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-light-solid) 50%,
        var(--color-secondary) 100%
    );

    /* Special badge gradients */
    --gradient-badge-referral: linear-gradient(
        135deg,
        rgb(251, 146, 60) 0%,
        rgb(245, 101, 101) 50%,
        rgb(236, 72, 153) 100%
    );
    --gradient-badge-gold: linear-gradient(
        135deg,
        rgb(251, 191, 36) 0%,
        rgb(245, 158, 11) 50%,
        rgb(217, 119, 6) 100%
    );
    --gradient-badge-achievement: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%
    );

    /* Progress bar fills (XP, trust score, challenge progress) */
    --gradient-progress-primary: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%
    );
    --gradient-progress-success: linear-gradient(
        90deg,
        var(--color-success) 0%,
        rgb(52, 211, 153) 100%
    );

    /* Celebration-specific transitions */
    --transition-celebration-panel: transform 0.5s var(--ease-elegant), opacity 0.4s var(--ease-out);
    --transition-celebration-glow: box-shadow 0.6s var(--ease-elegant);
    --transition-celebration-number: all 1s var(--ease-elegant);

    /* Split-screen auth/landing page layout */
    --auth-hero-width: 55%;
    --auth-content-width: 45%;
    --auth-card-max-width: 420px;
    --auth-card-padding: var(--spacing-xl);

    /* ========================================
       LISTING MODE BADGE COLORS
       Semantic colors for listing mode status badges.
       Distinct from --color-primary (buttons) to avoid
       badge/button visual confusion on cards.
       ======================================== */

    /* For Sale - uses success/commerce green */
    --color-mode-forsale: var(--color-success);
    --color-mode-forsale-dark: var(--color-success-dark);

    /* Showcase - uses warning/amber for "gallery display" */
    --color-mode-showcase: var(--color-warning);
    --color-mode-showcase-dark: var(--color-warning-dark);

    /* Offers accent - uses info/cyan for "negotiation" */
    --color-mode-offers: var(--color-info);
    --color-mode-offers-dark: var(--color-info-dark);

    /* Hidden - muted gray */
    --color-mode-hidden: var(--color-text-muted);

    /* Listing mode gradients for combined modes */
    --gradient-mode-forsale-offers: linear-gradient(135deg, var(--color-mode-forsale) 0%, var(--color-mode-offers) 100%);
    --gradient-mode-showcase: linear-gradient(135deg, var(--color-mode-showcase) 0%, var(--color-warning-dark) 100%);
    --gradient-mode-showcase-offers: linear-gradient(135deg, var(--color-mode-showcase) 0%, var(--color-mode-offers) 100%);

    /* Tinted badge variants — softer pill style for management contexts
       Uses transparent tints instead of solid fills for lighter visual weight */
    --color-mode-forsale-tint: rgba(34, 197, 94, 0.12);
    --color-mode-forsale-tint-text: var(--color-success-dark);
    --color-mode-showcase-tint: rgba(245, 158, 11, 0.12);
    --color-mode-showcase-tint-text: var(--color-warning-dark);
    --color-mode-hidden-tint: rgba(0, 0, 0, 0.06);
    --color-mode-hidden-tint-text: var(--color-text-muted);

    /* Role badge tints (activity center) */
    --color-role-buying-tint: rgba(59, 130, 246, 0.10);
    --color-role-buying-tint-text: var(--color-info-dark, #1d4ed8);
    --color-role-selling-tint: rgba(245, 158, 11, 0.10);
    --color-role-selling-tint-text: var(--color-warning-text, #b45309);

    /* Purchase type badge tints */
    --color-type-purchase-tint: rgba(16, 185, 129, 0.10);
    --color-type-purchase-tint-text: #047857;
    --color-type-offer-tint: rgba(139, 92, 246, 0.10);
    --color-type-offer-tint-text: #6d28d9;
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */

[data-theme="dark"] {
    /* Text colors */
    --color-text: rgb(240, 240, 245);
    --color-text-light: rgb(200, 200, 210);
    --color-text-muted: rgb(140, 140, 160);

    /* Background and surface colors */
    --color-background: rgb(18, 18, 28);
    --color-background-alt: rgb(22, 22, 34);
    --color-background-darkened: rgb(14, 14, 22);
    --color-surface: rgb(28, 28, 42);
    --color-surface-light: rgba(38, 38, 56, 0.7);
    --color-surface-darkened: rgb(22, 22, 34);
    --color-surface-elevated: rgb(36, 36, 54);
    --color-surface-dark: rgb(22, 22, 34);
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-light: rgba(0, 0, 0, 0.5);

    /* Border colors */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-medium: rgba(255, 255, 255, 0.12);
    --color-border-semi: rgba(255, 255, 255, 0.25);
    --color-border-light: rgba(255, 255, 255, 0.05);
    --color-border-dark: rgba(255, 255, 255, 0.15);
    --color-border-primary-subtle: rgba(92, 67, 244, 0.25);
    --color-border-primary-faint: rgba(92, 67, 244, 0.1);
    --color-border-primary-light: rgba(92, 67, 244, 0.15);
    --color-primary-bg-subtle: rgba(92, 67, 244, 0.06);
    --color-primary-bg-light: rgba(92, 67, 244, 0.06);
    --color-primary-bg-tint: rgba(92, 67, 244, 0.08);
    --color-primary-bg-faint: rgba(92, 67, 244, 0.03);
    --color-primary-border-soft: rgba(92, 67, 244, 0.3);
    --color-primary-border-medium: rgba(92, 67, 244, 0.4);

    /* Adjusted primary colors for dark mode */
    --color-primary-light: rgba(92, 67, 244, 0.2);
    --color-primary-lighter: rgba(92, 67, 244, 0.1);
    --color-primary-hover-bg: rgba(92, 67, 244, 0.15);

    /* Shadows for dark mode (more subtle, darker base) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.5);
    --shadow-card-lifted: 0 20px 40px rgba(0, 0, 0, 0.5);
    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.6);

    /* Dialog and autocomplete */
    --color-dialog-background: rgb(28, 28, 42);
    --color-dialog-border: rgba(255, 255, 255, 0.1);
    --color-dialog-shadow: rgba(0, 0, 0, 0.5);

    --color-autocomplete-bg: rgb(28, 28, 42);
    --color-autocomplete-border: rgba(255, 255, 255, 0.1);
    --color-form-valid: rgba(16, 185, 129, 0.15);

    /* Warning tints for dark mode */
    --color-warning-lighter: rgba(245, 158, 11, 0.08);
    --color-warning-muted: rgba(245, 158, 11, 0.35);
    --color-warning-tint: rgba(245, 158, 11, 0.15);
    --color-warning-text: rgb(251, 191, 36); /* bright amber for dark backgrounds */

    /* Badge/pill text colors — high contrast against tinted backgrounds */
    --color-badge-text-primary: #e0d9ff;    /* lavender on purple tint */
    --color-badge-text-success: #a7f3d0;    /* mint on green tint */
    --color-badge-text-error: #fecaca;       /* pink on red tint */
    --color-badge-text-warning: #fde68a;     /* cream on amber tint */
    --color-badge-text-info: #bfdbfe;        /* sky on blue tint */

    /* Badge/pill tint backgrounds — boosted opacity for dark surfaces */
    --color-badge-bg-primary: rgba(92, 67, 244, 0.25);
    --color-badge-bg-success: rgba(34, 197, 94, 0.25);
    --color-badge-bg-error: rgba(239, 68, 68, 0.25);
    --color-badge-bg-warning: rgba(245, 158, 11, 0.25);
    --color-badge-bg-info: rgba(59, 130, 246, 0.25);

    /* Shadows for dark mode */
    --shadow-glow-success: 0 2px 8px rgba(16, 185, 129, 0.4);

    /* Branded surface for dark mode */
    --gradient-surface-branded: linear-gradient(135deg, rgba(92, 67, 244, 0.1) 0%, rgba(0, 255, 203, 0.05) 50%, var(--color-surface) 100%);
    --gradient-card-base: linear-gradient(160deg, var(--color-surface) 0%, var(--color-surface-darkened) 100%);
    --gradient-footer-warm: linear-gradient(180deg, var(--color-surface-darkened) 0%, var(--color-primary-bg-faint) 100%);

    /* Tint gradients — boosted opacity for dark backgrounds */
    --gradient-tint-primary: linear-gradient(90deg, rgba(92, 67, 244, 0.12) 0%, rgba(92, 67, 244, 0.03) 100%);
    --gradient-tint-success: linear-gradient(90deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.03) 100%);
    --gradient-tint-warning: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.03) 100%);
    --gradient-tint-error: linear-gradient(90deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.03) 100%);
    --gradient-tint-info: linear-gradient(90deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.03) 100%);
    --gradient-tint-secondary: linear-gradient(90deg, rgba(0, 255, 203, 0.08) 0%, rgba(0, 255, 203, 0.02) 100%);
    --gradient-tint-neutral: linear-gradient(90deg, var(--color-surface-darkened) 0%, var(--color-surface) 100%);
    --gradient-surface-primary: linear-gradient(160deg, rgba(92, 67, 244, 0.06) 0%, var(--color-background) 100%);
    --gradient-surface-primary-strong: linear-gradient(160deg, rgba(92, 67, 244, 0.08) 0%, var(--color-surface) 100%);
    --gradient-surface-secondary: linear-gradient(160deg, rgba(0, 255, 203, 0.06) 0%, var(--color-background) 100%);
    --gradient-canvas-warm: linear-gradient(160deg, rgba(92, 67, 244, 0.08) 0%, rgba(251, 146, 60, 0.03) 50%, var(--color-background) 100%);
    --gradient-canvas-settings: linear-gradient(180deg, rgba(168, 148, 255, 0.06) 0%, rgba(168, 148, 255, 0.03) 30%, rgba(0, 255, 203, 0.02) 70%, rgba(168, 148, 255, 0.02) 100%);
    --color-section-glass: rgba(0, 0, 0, 0.2);
    --color-section-glass-border: rgba(255, 255, 255, 0.05);
    /* Warm text for dark mode */
    --color-text-warm: rgba(255, 255, 255, 0.95);
    --color-text-warm-medium: rgba(255, 255, 255, 0.85);
    --color-text-warm-body: rgba(255, 255, 255, 0.7);
    --color-text-warm-muted: rgba(255, 255, 255, 0.5);

    /* Glass effects for dark mode */
    --color-glass: rgba(255, 255, 255, 0.05);
    --color-glass-normal: rgba(255, 255, 255, 0.08);
    --color-glass-medium: rgba(255, 255, 255, 0.12);
    --color-glass-semi: rgba(255, 255, 255, 0.18);
    --color-glass-heavy: rgba(255, 255, 255, 0.25);

    /* Celebration tokens for dark mode */
    --color-celebration-surface: rgba(28, 28, 42, 0.97);
    --color-celebration-surface-glass: rgba(28, 28, 42, 0.85);
    --color-celebration-surface-glass-light: rgba(28, 28, 42, 0.15);
    --shadow-celebration-card:
        0 4px 24px rgba(0, 0, 0, 0.4),
        0 12px 48px rgba(92, 67, 244, 0.15),
        0 0 0 1px rgba(92, 67, 244, 0.1);
    --shadow-celebration-card-hover:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 24px 64px rgba(92, 67, 244, 0.2),
        0 0 0 1px rgba(92, 67, 244, 0.15);

    /* Tinted badge overrides — brighter against dark backgrounds */
    --color-mode-forsale-tint: rgba(34, 197, 94, 0.15);
    --color-mode-forsale-tint-text: #4ade80;
    --color-mode-showcase-tint: rgba(245, 158, 11, 0.15);
    --color-mode-showcase-tint-text: #fbbf24;
    --color-mode-hidden-tint: rgba(255, 255, 255, 0.08);
    --color-mode-hidden-tint-text: rgba(255, 255, 255, 0.5);

    /* Role badge tints (activity center) */
    --color-role-buying-tint: rgba(59, 130, 246, 0.15);
    --color-role-buying-tint-text: #93bbfd;
    --color-role-selling-tint: rgba(245, 158, 11, 0.15);
    --color-role-selling-tint-text: #fbbf24;

    /* Purchase type badge tints */
    --color-type-purchase-tint: rgba(16, 185, 129, 0.15);
    --color-type-purchase-tint-text: #6ee7b7;
    --color-type-offer-tint: rgba(139, 92, 246, 0.15);
    --color-type-offer-tint-text: #c4b5fd;
}

/* ==========================================================================
   HIGH CONTRAST THEME
   ========================================================================== */

[data-theme="high-contrast"] {
    /* Maximum contrast text */
    --color-text: rgb(0, 0, 0);
    --color-text-light: rgb(0, 0, 0);
    --color-text-muted: rgb(40, 40, 40);

    /* Clean backgrounds */
    --color-background: rgb(255, 255, 255);
    --color-background-alt: rgb(245, 245, 245);
    --color-surface: rgb(255, 255, 255);
    --color-surface-darkened: rgb(240, 240, 240);

    /* Solid borders for clarity */
    --color-border: rgb(0, 0, 0);
    --color-border-medium: rgb(0, 0, 0);
    --color-border-light: rgb(60, 60, 60);

    /* High contrast semantic colors */
    --color-primary: rgb(0, 0, 160);
    --color-primary-dark: rgb(0, 0, 120);
    --color-primary-light: rgba(0, 0, 160, 0.2);
    --color-error: rgb(180, 0, 0);
    --color-error-light: rgba(180, 0, 0, 0.15);
    --color-success: rgb(0, 100, 0);
    --color-success-light: rgba(0, 100, 0, 0.15);
    --color-warning: rgb(180, 100, 0);

    /* Remove shadows for cleaner UI */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-card: 0 0 0 2px var(--color-border);
    --shadow-card-hover: 0 0 0 3px var(--color-primary);
}

/* ==========================================================================
   DARK HIGH CONTRAST THEME
   ========================================================================== */

[data-theme="dark-high-contrast"] {
    /* Maximum contrast text on dark */
    --color-text: rgb(255, 255, 255);
    --color-text-light: rgb(255, 255, 255);
    --color-text-muted: rgb(220, 220, 220);

    /* Pure dark backgrounds */
    --color-background: rgb(0, 0, 0);
    --color-background-alt: rgb(10, 10, 10);
    --color-surface: rgb(0, 0, 0);
    --color-surface-darkened: rgb(15, 15, 15);
    --color-surface-elevated: rgb(20, 20, 20);

    /* White borders for maximum contrast */
    --color-border: rgb(255, 255, 255);
    --color-border-medium: rgb(255, 255, 255);
    --color-border-light: rgb(200, 200, 200);

    /* Bright colors for dark high contrast */
    --color-primary: rgb(130, 160, 255);
    --color-primary-dark: rgb(100, 130, 255);
    --color-primary-light: rgba(130, 160, 255, 0.3);
    --color-secondary: rgb(0, 255, 200);
    --color-error: rgb(255, 100, 100);
    --color-success: rgb(100, 255, 150);
    --color-warning: rgb(255, 200, 100);

    /* Remove shadows, use borders */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-card: 0 0 0 2px var(--color-border);
    --shadow-card-hover: 0 0 0 3px var(--color-primary);
}