/**
 * JointCommerce Design Tokens
 * Single source of truth for all design values
 * Import this file FIRST in the CSS cascade
 */

:root {
    /* ========================================
       SPACING SCALE
       Uses 4px base unit for consistency
       ======================================== */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ========================================
       TYPOGRAPHY SCALE
       Based on existing patterns found in codebase
       ======================================== */
    /* Font Families */
    --font-primary: 'AUTHENTIC Sans', sans-serif;
    --font-display: 'AUTHENTIC Sans', sans-serif;
    --font-mono: 'Monaco', 'Consolas', monospace;

    /* Font Sizes - Using rem for accessibility (base 16px) */
    --text-xs: 0.6875rem;    /* 11px */
    --text-sm: 0.8125rem;    /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md: 0.9375rem;    /* 15px */
    --text-lg: 1rem;         /* 16px */
    --text-xl: 1.125rem;     /* 18px */
    --text-2xl: 1.25rem;     /* 20px */
    --text-3xl: 1.5rem;      /* 24px */
    --text-4xl: 1.75rem;     /* 28px */
    --text-5xl: 2rem;        /* 32px */
    --text-6xl: 2.5rem;      /* 40px */
    --text-7xl: 3rem;        /* 48px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.4;
    --leading-relaxed: 1.5;
    --leading-loose: 1.6;

    /* Letter Spacing */
    --tracking-tight: -0.3px;
    --tracking-normal: 0;
    --tracking-wide: 0.5px;
    --tracking-wider: 1px;

    /* ========================================
       COLOR PALETTE
       Existing brand colors preserved exactly
       ======================================== */
    /* Primary - Mint */
    --primary: #C7F9F1;
    --primary-light: #e6faf8;
    --primary-dark: #111111;
    --primary-darker: #111111;
    --primary-rgb: 199, 249, 241;
    --primary-muted: rgba(199, 249, 241, 0.3);
    --primary-accent: #006B6B;
    --primary-accent-rgb: 0, 107, 107;

    /* Secondary - Near Black */
    --secondary: #111111;
    --secondary-rgb: 17, 17, 17;

    /* Tertiary - Gray */
    --tertiary: #B5B5B5;
    --tertiary-rgb: 181, 181, 181;

    /* Neutral */
    --bg: #ffffff;
    --bg-rgb: 255, 255, 255;
    --surface: #f6f7f9;
    --surface-hover: #eef1f3;
    --text: #111111;
    --text-muted: #4a5568;    /* 7.5:1 contrast on white - WCAG AAA compliant */
    --text-light: #596673;    /* 5.9:1 contrast on white - WCAG AA compliant */
    --text-inverse: #ffffff;
    --border: #e6e9eb;
    --border-muted: #B5B5B5;

    /* Semantic */
    --success: #22c55e;
    --success-rgb: 34, 197, 94;
    --success-dark: #16a34a;
    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --warning-dark: #d97706;
    --error: #ef4444;
    --error-rgb: 239, 68, 68;
    --error-dark: #dc2626;
    --info: #3b82f6;
    --info-rgb: 59, 130, 246;
    --info-dark: #2563eb;
    --muted: #555555;
    --muted-rgb: 85, 85, 85;

    /* Semantic Light Shades (for backgrounds/badges) */
    --success-light: #dcfce7;
    --warning-light: #fef3c7;
    --error-light: #fee2e2;
    --info-light: #e0f2fe;

    /* ========================================
       STATUS INDICATORS (Enterprise)
       ======================================== */
    --status-open: #22c55e;
    --status-open-bg: rgba(34, 197, 94, 0.1);
    --status-closed: #ef4444;
    --status-closed-bg: rgba(239, 68, 68, 0.1);
    --status-coming-soon: #f59e0b;
    --status-coming-soon-bg: rgba(245, 158, 11, 0.1);
    --status-unavailable: #6b7280;
    --status-unavailable-bg: rgba(107, 114, 128, 0.1);

    /* ========================================
       BADGE COLORS (Unified System)
       ======================================== */
    /* Deal Types */
    --badge-deal: #111111;
    --badge-deal-bg: #C7F9F1;
    --badge-flash: #ef4444;
    --badge-flash-bg: #fef2f2;
    --badge-medical: #059669;
    --badge-medical-bg: #ecfdf5;
    --badge-loyalty: #7c3aed;
    --badge-loyalty-bg: #f5f3ff;
    --badge-birthday: #ec4899;
    --badge-birthday-bg: #fdf2f8;
    --badge-happy-hour: #0891b2;
    --badge-happy-hour-bg: #ecfeff;
    --badge-first-time: #f59e0b;
    --badge-first-time-bg: #fffbeb;

    /* Verification Badges */
    --badge-verified: #111111;
    --badge-verified-bg: #C7F9F1;
    --badge-premium: #7c3aed;
    --badge-premium-bg: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    --badge-featured: #f59e0b;
    --badge-featured-bg: #fffbeb;

    /* Campaign Types */
    --programmatic: #0c7d94;
    --programmatic-rgb: 12, 125, 148;
    --video: #5a32a3;
    --video-rgb: 90, 50, 163;
    --social: #1877f2;
    --social-rgb: 24, 119, 242;

    /* Loyalty Tier Colors */
    --tier-bronze: #cd7f32;
    --tier-silver: #c0c0c0;
    --tier-gold: #ffd700;
    --tier-platinum: #e5e4e2;

    /* Social Brand Colors */
    --social-twitter: #1da1f2;
    --social-facebook: #1877f2;
    --social-whatsapp: #25d366;
    --social-linkedin: #0a66c2;
    --social-google: #ea4335;

    /* Extended Palette */
    --pink: #db2777;
    --pink-light: #fdf2f8;
    --purple: #9333ea;
    --purple-light: #f5f3ff;
    --cyan: #0284c7;
    --cyan-light: #e0f2fe;

    /* Gray Scale (Tailwind) */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Neutral Scale (Aliases for compatibility) */
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;

    /* Surface Variants */
    --surface-primary: var(--bg);
    --surface-secondary: var(--surface);
    --surface-tertiary: var(--gray-100);

    /* Text Variants (Aliases) */
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --text-tertiary: var(--text-light);

    /* Border Variants (Aliases) */
    --border-default: var(--border);
    --border-light: var(--gray-200);
    --border-dark: var(--gray-400);

    /* Alpha Variants - Primary */
    --primary-alpha-5: rgba(199, 249, 241, 0.05);
    --primary-alpha-10: rgba(199, 249, 241, 0.1);
    --primary-alpha-20: rgba(199, 249, 241, 0.2);
    --primary-alpha-30: rgba(199, 249, 241, 0.3);
    --primary-alpha-40: rgba(199, 249, 241, 0.4);

    /* Alpha Variants - Secondary */
    --secondary-alpha-5: rgba(17, 17, 17, 0.05);
    --secondary-alpha-10: rgba(17, 17, 17, 0.1);
    --secondary-alpha-20: rgba(17, 17, 17, 0.2);

    /* Alpha Variants - Error/Danger */
    --error-alpha-5: rgba(220, 38, 38, 0.05);
    --error-alpha-10: rgba(220, 38, 38, 0.1);
    --error-alpha-20: rgba(220, 38, 38, 0.2);
    --danger-alpha-5: var(--error-alpha-5);
    --danger-alpha-10: var(--error-alpha-10);
    --danger-alpha-20: var(--error-alpha-20);

    /* Alpha Variants - Success */
    --success-alpha-5: rgba(34, 197, 94, 0.05);
    --success-alpha-10: rgba(34, 197, 94, 0.1);
    --success-alpha-20: rgba(34, 197, 94, 0.2);

    /* Alpha Variants - Warning */
    --warning-alpha-5: rgba(234, 179, 8, 0.05);
    --warning-alpha-10: rgba(234, 179, 8, 0.1);
    --warning-alpha-20: rgba(234, 179, 8, 0.2);

    /* Alpha Variants - Info */
    --info-alpha-5: rgba(59, 130, 246, 0.05);
    --info-alpha-10: rgba(59, 130, 246, 0.1);
    --info-alpha-20: rgba(59, 130, 246, 0.2);

    /* Extended Alpha Variants (15%, 30% for components needing intermediate opacity) */
    --primary-alpha-15: rgba(199, 249, 241, 0.15);
    --secondary-alpha-15: rgba(17, 17, 17, 0.15);
    --secondary-alpha-30: rgba(17, 17, 17, 0.3);
    --error-alpha-15: rgba(220, 38, 38, 0.15);
    --danger-alpha-15: var(--error-alpha-15);
    --success-alpha-15: rgba(34, 197, 94, 0.15);
    --warning-alpha-15: rgba(234, 179, 8, 0.15);
    --info-alpha-15: rgba(59, 130, 246, 0.15);

    /* Danger (Alias for Error) */
    --danger: var(--error);
    --danger-rgb: var(--error-rgb);
    --danger-dark: var(--error-dark);
    --danger-light: var(--error-light);

    /* Special */
    --accent-purple: #7c3aed;
    --rating-gold: #FFB800;
    --code-bg: #1e1e1e;
    --code-text: #d4d4d4;
    --code-header-bg: #2d2d2d;
    --code-border: #3d3d3d;
    --code-muted: #a0a0a0;
    --code-tag: #569cd6;
    --code-attr: #9cdcfe;
    --code-string: #ce9178;
    --code-comment: #6a9955;
    --code-keyword: #c586c0;
    --code-btn-border: #4d4d4d;
    --code-btn-hover-border: #5d5d5d;
    --code-line-bg: #1a1a1a;
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --accent-orange: #fd7e14;
    --accent-teal: #006B6B;
    --purple-bg: #f5f3ff;
    --info-text: #1e40af;
    --info-bg: #dbeafe;
    --skeleton-base: #e2e8f0;
    --skeleton-shine: #f1f5f9;

    /* Strain Type Colors */
    --strain-sativa-bg: #fef3c7;
    --strain-sativa-text: #92400e;
    --strain-indica-bg: #ede9fe;
    --strain-indica-text: #5b21b6;
    --strain-hybrid-bg: #dcfce7;
    --strain-hybrid-text: #166534;

    /* ========================================
       CATEGORY COLORS (Product/Menu)
       ======================================== */
    --category-flower: #059669;
    --category-flower-bg: #ecfdf5;
    --category-edibles: #d97706;
    --category-edibles-bg: #fffbeb;
    --category-concentrates: #b45309;
    --category-concentrates-bg: #fef3c7;
    --category-prerolls: #7c3aed;
    --category-prerolls-bg: #f5f3ff;
    --category-vapes: #2563eb;
    --category-vapes-bg: #eff6ff;
    --category-topicals: #0d9488;
    --category-topicals-bg: #f0fdfa;
    --category-tinctures: #4f46e5;
    --category-tinctures-bg: #eef2ff;
    --category-accessories: #6b7280;
    --category-accessories-bg: #f9fafb;

    /* ========================================
       ROLE BADGES (Dashboard/Team)
       ======================================== */
    --role-owner-bg: #fef3c7;
    --role-owner-text: #92400e;
    --role-manager-bg: #dbeafe;
    --role-manager-text: #1e40af;
    --role-staff-bg: #e0e7ff;
    --role-staff-text: #3730a3;
    --role-budtender-bg: var(--primary, #C7F9F1);
    --role-budtender-text: var(--secondary, #111111);
    --role-inventory-bg: #ede9fe;
    --role-inventory-text: #5b21b6;
    --role-delivery-bg: #fce7f3;
    --role-delivery-text: #9d174d;
    --role-admin-bg: #111111;
    --role-admin-text: #ffffff;

    /* ========================================
       BORDER RADIUS SCALE
       ======================================== */
    --radius-none: 0;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* ========================================
       SHADOW SCALE
       ======================================== */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.3);

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    --z-base: 0;
    --z-above: 1;
    --z-dropdown: 100;
    --z-sticky: 1000;
    --z-fixed: 1001;
    --z-modal-backdrop: 4999;
    --z-modal: 5000;
    --z-drawer: 6000;
    --z-overlay: 9000;
    --z-toast: 10000;
    --z-max: 999999;

    /* ========================================
       BREAKPOINTS (for reference - use in @media)
       ======================================== */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1440px;

    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 0.1s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       CONTAINER WIDTHS
       ======================================== */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;

    /* ========================================
       ADMIN THEME (Primary Scale)
       From admin-custom.css
       ======================================== */
    --primary-50: #EDFDFB;
    --primary-100: #C7F9F1;
    --primary-200: #9EF3E5;
    --primary-300: #6DEAD6;
    --primary-400: #3DDCC3;
    --primary-500: #006B6B;
    --primary-500-rgb: 0, 107, 107;
    --primary-600: #17A88C;
    --primary-600-rgb: 23, 168, 140;
    --primary-700: #138670;
    --primary-800: #106B5A;
    --primary-900: #0C5548;
    --primary-950: #073830;

    /* ========================================
       GRID SYSTEM
       From dashboard-grid.css
       ======================================== */
    --grid-max-width: 1400px;
    --grid-gap: 24px;
    --grid-columns: 12;
    --grid-padding: 24px;
    --grid-padding-mobile: 16px;

    /* ========================================
       STRAIN TYPE COLORS (Solid Backgrounds)
       From strains.css - complements existing strain-*-bg/text
       ======================================== */
    --strain-indica: #8b5cf6;
    --strain-indica-light: #a78bfa;
    --strain-sativa: #f59e0b;
    --strain-sativa-light: #fbbf24;
    --strain-hybrid: var(--secondary, #111111);
    --strain-cbd: #06b6d4;
    --strain-cbd-dark: #0891b2;
    --strain-balanced: var(--tertiary, #B5B5B5);

    /* Strain Type Color Scales (for gradient backgrounds in cards/badges) */
    --strain-indica-50: #f3e8ff;
    --strain-indica-100: #e9d5ff;
    --strain-sativa-50: #fef3c7;
    --strain-sativa-100: #fde68a;
    --strain-hybrid-50: #ecfdf5;
    --strain-hybrid-100: #d1fae5;
    --strain-cbd-50: #ecfeff;
    --strain-cbd-100: #cffafe;

    /* ========================================
       ACCOUNT PAGE ALIASES
       From accounts.css - aliases for consistency
       ======================================== */
    --account-mint: var(--primary, #C7F9F1);
    --account-mint-dark: var(--secondary, #111111);
    --account-mint-light: var(--primary-light, #e5fcf8);

    /* ========================================
       COMPLIANCE COMPONENT
       From compliance-disclaimer.css
       ======================================== */
    /* Compliance-specific colors */
    --compliance-info-bg: rgba(59, 130, 246, 0.08);
    --compliance-info-border: rgba(59, 130, 246, 0.25);
    --compliance-info-text: var(--info-dark, #2563eb);
    --compliance-info-icon: var(--info, #3b82f6);
    --compliance-warning-bg: rgba(245, 158, 11, 0.08);
    --compliance-warning-border: rgba(245, 158, 11, 0.25);
    --compliance-warning-text: var(--warning-dark, #d97706);
    --compliance-warning-icon: var(--warning, #f59e0b);
    --compliance-danger-bg: rgba(239, 68, 68, 0.08);
    --compliance-danger-border: rgba(239, 68, 68, 0.25);
    --compliance-danger-text: var(--error-dark, #dc2626);
    --compliance-danger-icon: var(--error, #ef4444);
    /* State-specific accent colors */
    --compliance-ca-accent: #00A3E0;
    --compliance-co-accent: #00843D;
    --compliance-ny-accent: #F4D03F;
    --compliance-nv-accent: #003057;
    --compliance-az-accent: #BF5700;
    --compliance-il-accent: #E31837;
    --compliance-mi-accent: #003F87;
    --compliance-ma-accent: #14284B;
    --compliance-or-accent: #003057;
    --compliance-wa-accent: #2D7E43;
    /* THC Warning colors */
    --thc-warning-bg: #1a1a1a;
    --thc-warning-text: #ffffff;
    --thc-warning-symbol: #ef4444;

    /* ========================================
       AUTOCOMPLETE COMPONENT
       From autocomplete.css
       ======================================== */
    --autocomplete-height: 44px;
    --autocomplete-height-sm: 36px;
    --autocomplete-height-lg: 56px;
    --autocomplete-bg: var(--surface);
    --autocomplete-bg-focus: #fff;
    --autocomplete-border: var(--border);
    --autocomplete-border-focus: var(--secondary);
    --autocomplete-text: var(--text);
    --autocomplete-placeholder: var(--text-muted);
    --autocomplete-icon: var(--text-muted);
    --autocomplete-icon-focus: var(--secondary);
    --autocomplete-ring-width: 4px;
    --autocomplete-ring-color: rgba(17, 17, 17, 0.1);
    --autocomplete-dropdown-bg: #fff;
    --autocomplete-dropdown-border: var(--border);
    --autocomplete-dropdown-shadow: var(--shadow-lg);
    --autocomplete-dropdown-max-height: 450px;
    --autocomplete-item-hover-bg: var(--surface);
    --autocomplete-item-active-bg: var(--primary);
    --autocomplete-item-active-text: var(--secondary);
    --autocomplete-transition: var(--transition-fast);

    /* ========================================
       COUPON INPUT COMPONENT
       From coupon-input.css
       ======================================== */
    --coupon-input-height: 48px;
    --coupon-input-height-sm: 40px;
    --coupon-input-height-lg: 56px;
    --coupon-input-bg: var(--surface);
    --coupon-input-bg-focus: #fff;
    --coupon-input-border: var(--border);
    --coupon-input-border-focus: var(--secondary);
    --coupon-input-text: var(--text);
    --coupon-input-placeholder: var(--text-muted);
    --coupon-input-ring-width: 4px;
    --coupon-input-ring-color: rgba(17, 17, 17, 0.1);
    --coupon-chip-bg: var(--primary);
    --coupon-chip-text: var(--secondary);
    --coupon-chip-border: transparent;
    --coupon-chip-remove-bg: transparent;
    --coupon-chip-remove-bg-hover: rgba(17, 17, 17, 0.1);
    --coupon-success-bg: rgba(var(--success-rgb), 0.08);
    --coupon-success-border: var(--success);
    --coupon-success-text: var(--success-dark);
    --coupon-error-bg: rgba(var(--error-rgb), 0.08);
    --coupon-error-border: var(--error);
    --coupon-error-text: var(--error-dark);
    --coupon-warning-bg: rgba(var(--warning-rgb), 0.08);
    --coupon-warning-border: var(--warning);
    --coupon-warning-text: var(--warning-dark);
    --coupon-input-transition: var(--transition-fast);

    /* ========================================
       OTP INPUT COMPONENT
       From otp-input.css
       ======================================== */
    --otp-digit-size: 48px;
    --otp-digit-size-sm: 40px;
    --otp-digit-size-lg: 56px;
    --otp-gap: var(--space-2);
    --otp-gap-sm: var(--space-1);
    --otp-gap-lg: var(--space-3);
    --otp-bg: #fff;
    --otp-bg-focus: #fff;
    --otp-border: var(--border);
    --otp-border-focus: var(--secondary);
    --otp-border-filled: var(--secondary);
    --otp-text: var(--text);
    --otp-placeholder: var(--text-muted);
    --otp-ring-width: 4px;
    --otp-ring-color: rgba(17, 17, 17, 0.1);
    --otp-error-border: var(--error);
    --otp-error-ring-color: rgba(var(--error-rgb), 0.1);
    --otp-success-border: var(--success);
    --otp-success-ring-color: rgba(var(--success-rgb), 0.1);
    --otp-disabled-bg: var(--surface);
    --otp-disabled-opacity: 0.6;
    --otp-transition: var(--transition-fast);

    /* ========================================
       TAG INPUT COMPONENT
       From tag-input.css
       ======================================== */
    --tag-input-min-height: 44px;
    --tag-input-min-height-sm: 36px;
    --tag-input-min-height-lg: 52px;
    --tag-input-bg: var(--surface);
    --tag-input-bg-focus: #fff;
    --tag-input-border: var(--border);
    --tag-input-border-focus: var(--secondary);
    --tag-input-text: var(--text);
    --tag-input-placeholder: var(--text-muted);
    --tag-input-ring-width: 4px;
    --tag-input-ring-color: rgba(17, 17, 17, 0.1);
    --tag-bg: var(--primary);
    --tag-text: var(--secondary);
    --tag-border: transparent;
    --tag-bg-hover: rgba(199, 249, 241, 0.8);
    --tag-remove-bg: transparent;
    --tag-remove-bg-hover: rgba(17, 17, 17, 0.1);
    --tag-remove-color: var(--secondary);
    --tag-suggestions-bg: #fff;
    --tag-suggestions-border: var(--border);
    --tag-suggestions-shadow: var(--shadow-lg);
    --tag-suggestions-max-height: 240px;
    --tag-suggestion-hover-bg: var(--surface);
    --tag-suggestion-active-bg: var(--primary);
    --tag-suggestion-active-text: var(--secondary);
    --tag-input-transition: var(--transition-fast);

    /* ========================================
       FAB (FLOATING ACTION BUTTON)
       From fab.css
       ======================================== */
    --fab-size-sm: 40px;
    --fab-size-md: 56px;
    --fab-size-lg: 72px;
    --fab-size-mini: 40px;
    --fab-icon-size-sm: 20px;
    --fab-icon-size-md: 24px;
    --fab-icon-size-lg: 28px;
    --fab-offset: var(--space-6);
    --fab-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --fab-z-index: var(--z-sticky);
    --fab-transition: var(--transition-base);
    --fab-elevation: var(--shadow-lg);
    --fab-elevation-hover: var(--shadow-xl);

    /* ========================================
       PAYMENT METHOD CARD
       From payment-method-card.css
       ======================================== */
    --payment-card-visa: #1A1F71;
    --payment-card-visa-bg: #e8e9f5;
    --payment-card-mastercard: #EB001B;
    --payment-card-mastercard-secondary: #F79E1B;
    --payment-card-mastercard-bg: #fff5f5;
    --payment-card-amex: #006FCF;
    --payment-card-amex-bg: #e6f2fc;
    --payment-card-discover: #FF6000;
    --payment-card-discover-bg: #fff4ec;
    --payment-card-jcb: #0E4C96;
    --payment-card-jcb-bg: #e6eef5;
    --payment-card-diners: #004B9C;
    --payment-card-diners-bg: #e6edf5;
    --payment-card-unionpay: #D20C0C;
    --payment-card-unionpay-bg: #fce6e6;
    --payment-card-generic: var(--text-muted);
    --payment-card-generic-bg: var(--surface);

    /* ========================================
       SEARCH BOX COMPONENT
       From search-box.css
       ======================================== */
    --search-box-height: 44px;
    --search-box-height-sm: 36px;
    --search-box-height-lg: 56px;
    --search-box-height-hero: 64px;
    --search-box-bg: var(--surface);
    --search-box-bg-focus: #fff;
    --search-box-border: var(--border);
    --search-box-border-focus: var(--secondary);
    --search-box-text: var(--text);
    --search-box-placeholder: var(--text-muted);
    --search-box-icon: var(--text-muted);
    --search-box-icon-focus: var(--secondary);
    --search-box-ring-width: 4px;
    --search-box-ring-color: rgba(17, 17, 17, 0.1);
    --search-dropdown-bg: #fff;
    --search-dropdown-border: var(--border);
    --search-dropdown-shadow: var(--shadow-lg);
    --search-dropdown-max-height: 400px;
    --search-item-hover-bg: var(--surface);
    --search-item-active-bg: var(--primary);
    --search-item-active-text: var(--secondary);
    --search-transition: var(--transition-fast);
    --search-expand-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       FORM COMPONENTS
       From forms.css
       ======================================== */
    --form-border-width: 1px;
    --form-border-color: var(--border);
    --form-border-radius: var(--radius-lg);
    --form-bg: var(--surface);
    --form-focus-border-color: var(--secondary);
    --form-focus-ring-color: rgba(17, 17, 17, 0.1);
    --form-focus-ring-width: 4px;
    --form-disabled-bg: var(--surface);
    --form-disabled-opacity: 0.5;
    --form-valid-color: var(--success);
    --form-invalid-color: var(--error);
}

/* Dark Mode Token Overrides */
[data-theme="dark"],
.dark-mode {
    /* Core backgrounds */
    --bg: #0f1419;
    --bg-rgb: 15, 20, 25;
    --surface: #1a2028;
    --surface-hover: #242c36;

    /* Text colors - WCAG AA compliant (4.5:1+ contrast on #0f1419) */
    --text: #e7e9ea;
    --text-muted: #a8b3bf;
    --text-light: #8b98a5;
    --text-inverse: #111111;

    /* Borders */
    --border: #2f3336;
    --border-muted: #4a5568;

    /* Gray Scale (inverted for dark mode) */
    --gray-50: #18212f;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;

    /* Neutral Scale (aliases) */
    --neutral-50: var(--gray-50);
    --neutral-100: var(--gray-100);
    --neutral-200: var(--gray-200);
    --neutral-300: var(--gray-300);
    --neutral-400: var(--gray-400);
    --neutral-500: var(--gray-500);
    --neutral-600: var(--gray-600);
    --neutral-700: var(--gray-700);
    --neutral-800: var(--gray-800);
    --neutral-900: var(--gray-900);

    /* Surface Variants */
    --surface-primary: var(--bg);
    --surface-secondary: var(--surface);
    --surface-tertiary: var(--gray-100);

    /* Text Variants */
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --text-tertiary: var(--text-light);

    /* Border Variants */
    --border-default: var(--border);
    --border-light: var(--gray-200);
    --border-dark: var(--gray-400);

    /* Shadows (stronger for dark backgrounds) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);

    /* Primary stays bright for contrast */
    --primary: #C7F9F1;
    --primary-light: #d8fbf6;
    --primary-dark: #9ef3e5;

    /* Accent lighter in dark mode for readability (5.3:1 on #0f1419) */
    --primary-accent: #4DC9C9;
    --primary-accent-rgb: 77, 201, 201;

    /* Secondary adjusts for dark mode */
    --secondary: #ffffff;

    /* Secondary alpha variants flip for dark mode (white-based) */
    --secondary-alpha-5: rgba(255, 255, 255, 0.05);
    --secondary-alpha-10: rgba(255, 255, 255, 0.1);
    --secondary-alpha-15: rgba(255, 255, 255, 0.15);
    --secondary-alpha-20: rgba(255, 255, 255, 0.2);
    --secondary-alpha-30: rgba(255, 255, 255, 0.3);

    /* Code blocks */
    --code-bg: #0d1117;
    --code-text: #c9d1d9;

    /* Form inputs */
    --form-bg: #1a2028;
    --autocomplete-bg: #1a2028;
    --autocomplete-bg-focus: #242c36;
    --autocomplete-dropdown-bg: #1a2028;
    --search-box-bg: #1a2028;
    --search-box-bg-focus: #242c36;
    --search-dropdown-bg: #1a2028;
    --tag-input-bg: #1a2028;
    --tag-input-bg-focus: #242c36;
    --tag-suggestions-bg: #1a2028;
    --coupon-input-bg: #1a2028;
    --coupon-input-bg-focus: #242c36;
    --otp-bg: #1a2028;
    --otp-bg-focus: #242c36;

    /* Skeleton loading */
    --skeleton-base: #2f3336;
    --skeleton-shine: #3d4449;

    /* Status colors (keep bright for visibility) */
    --status-open-bg: rgba(34, 197, 94, 0.15);
    --status-closed-bg: rgba(239, 68, 68, 0.15);
    --status-coming-soon-bg: rgba(245, 158, 11, 0.15);
    --status-unavailable-bg: rgba(107, 114, 128, 0.2);

    /* Badge adjustments */
    --badge-deal: #C7F9F1;
    --badge-deal-bg: rgba(199, 249, 241, 0.15);

    /* Strain scale (darkened for dark backgrounds) */
    --strain-indica-50: #2d1b4e;
    --strain-indica-100: #3b2466;
    --strain-sativa-50: #3d2e0a;
    --strain-sativa-100: #4a380e;
    --strain-hybrid-50: #0d2818;
    --strain-hybrid-100: #133a23;
    --strain-cbd-50: #0c2a30;
    --strain-cbd-100: #103840;

    /* Docs-specific overrides */
    --docs-sidebar-bg: #1a2028;
    --docs-header-bg: #1a2028;
    --docs-preview-bg: #ffffff; /* Keep preview canvas light for consistent component display */
}

/* System preference detection - mirrors [data-theme="dark"] above */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        /* Core backgrounds */
        --bg: #0f1419;
        --bg-rgb: 15, 20, 25;
        --surface: #1a2028;
        --surface-hover: #242c36;

        /* Text colors */
        --text: #e7e9ea;
        --text-muted: #a8b3bf;
        --text-light: #8b98a5;
        --text-inverse: #111111;

        /* Borders */
        --border: #2f3336;
        --border-muted: #4a5568;

        /* Gray Scale (inverted) */
        --gray-50: #18212f;
        --gray-100: #1f2937;
        --gray-200: #374151;
        --gray-300: #4b5563;
        --gray-400: #6b7280;
        --gray-500: #9ca3af;
        --gray-600: #d1d5db;
        --gray-700: #e5e7eb;
        --gray-800: #f3f4f6;
        --gray-900: #f9fafb;

        /* Neutral Scale (aliases) */
        --neutral-50: var(--gray-50);
        --neutral-100: var(--gray-100);
        --neutral-200: var(--gray-200);
        --neutral-300: var(--gray-300);
        --neutral-400: var(--gray-400);
        --neutral-500: var(--gray-500);
        --neutral-600: var(--gray-600);
        --neutral-700: var(--gray-700);
        --neutral-800: var(--gray-800);
        --neutral-900: var(--gray-900);

        /* Surface Variants */
        --surface-primary: var(--bg);
        --surface-secondary: var(--surface);
        --surface-tertiary: var(--gray-100);

        /* Text Variants */
        --text-primary: var(--text);
        --text-secondary: var(--text-muted);
        --text-tertiary: var(--text-light);

        /* Border Variants */
        --border-default: var(--border);
        --border-light: var(--gray-200);
        --border-dark: var(--gray-400);

        /* Shadows */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);

        /* Primary stays bright */
        --primary: #C7F9F1;
        --primary-light: #d8fbf6;
        --primary-dark: #9ef3e5;

        /* Accent lighter in dark mode for readability (5.3:1 on #0f1419) */
        --primary-accent: #4DC9C9;
        --primary-accent-rgb: 77, 201, 201;

        /* Secondary adjusts for dark mode */
        --secondary: #ffffff;
        --secondary-alpha-5: rgba(255, 255, 255, 0.05);
        --secondary-alpha-10: rgba(255, 255, 255, 0.1);
        --secondary-alpha-15: rgba(255, 255, 255, 0.15);
        --secondary-alpha-20: rgba(255, 255, 255, 0.2);
        --secondary-alpha-30: rgba(255, 255, 255, 0.3);

        /* Code blocks */
        --code-bg: #0d1117;
        --code-text: #c9d1d9;

        /* Form inputs */
        --form-bg: #1a2028;
        --autocomplete-bg: #1a2028;
        --autocomplete-bg-focus: #242c36;
        --autocomplete-dropdown-bg: #1a2028;
        --search-box-bg: #1a2028;
        --search-box-bg-focus: #242c36;
        --search-dropdown-bg: #1a2028;
        --tag-input-bg: #1a2028;
        --tag-input-bg-focus: #242c36;
        --tag-suggestions-bg: #1a2028;
        --coupon-input-bg: #1a2028;
        --coupon-input-bg-focus: #242c36;
        --otp-bg: #1a2028;
        --otp-bg-focus: #242c36;

        /* Skeleton loading */
        --skeleton-base: #2f3336;
        --skeleton-shine: #3d4449;

        /* Status colors */
        --status-open-bg: rgba(34, 197, 94, 0.15);
        --status-closed-bg: rgba(239, 68, 68, 0.15);
        --status-coming-soon-bg: rgba(245, 158, 11, 0.15);
        --status-unavailable-bg: rgba(107, 114, 128, 0.2);

        /* Badge adjustments */
        --badge-deal: #C7F9F1;
        --badge-deal-bg: rgba(199, 249, 241, 0.15);

        /* Strain scale (darkened for dark backgrounds) */
        --strain-indica-50: #2d1b4e;
        --strain-indica-100: #3b2466;
        --strain-sativa-50: #3d2e0a;
        --strain-sativa-100: #4a380e;
        --strain-hybrid-50: #0d2818;
        --strain-hybrid-100: #133a23;
        --strain-cbd-50: #0c2a30;
        --strain-cbd-100: #103840;

        /* Docs-specific */
        --docs-sidebar-bg: #1a2028;
        --docs-header-bg: #1a2028;
        --docs-preview-bg: #ffffff;
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01ms;
        --transition-base: 0.01ms;
        --transition-slow: 0.01ms;
        --transition-bounce: 0.01ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --primary: #000000;
        --primary-dark: #000000;
        --text: #000000;
        --text-muted: #333333;
        --bg: #ffffff;
        --surface: #ffffff;
        --border: #000000;
    }
}

/* Mobile FAB offset override */
@media (max-width: 768px) {
    :root {
        --fab-offset: var(--space-4);
    }
}

/* ========================================
   FOCUS STATES (Enterprise Accessibility)
   ======================================== */
/* Global focus-visible styles for all interactive elements */
:focus-visible {
    outline: 2px solid var(--primary-dark, #111111);
    outline-offset: 2px;
}

/* Buttons and links */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary-dark, #111111);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(199, 249, 241, 0.5);
}

/* Form elements */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-dark, #111111);
    outline-offset: 0;
    border-color: var(--primary-dark, #111111);
}

/* Skip link visible on focus */
.skip-link:focus {
    position: fixed;
    top: var(--space-4, 16px);
    left: var(--space-4, 16px);
    z-index: var(--z-max, 999999);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--primary-dark, #111111);
    color: #ffffff;
    text-decoration: none;
    border-radius: var(--radius-md, 8px);
    font-weight: var(--font-semibold, 600);
}