/**
 * =============================================================================
 * NERDS TECHNOLOGY - DESIGN SYSTEM v3.0.0
 * =============================================================================
 * 
 * A semantic token-based design system ensuring consistency, accessibility,
 * and visual hierarchy across all sub-applications.
 * 
 * Architecture:
 * 1. Primitive Tokens (raw HSL values)
 * 2. Semantic Tokens (functional mappings)
 * 3. Component Tokens (specific UI patterns)
 * 
 * Why HSL?
 * - Predictable lightness adjustments (L value directly controls brightness)
 * - Easy to create accessible color scales
 * - Intuitive for creating hover/active states (just adjust L by 5-10%)
 * - Prevents "too bright" or "washed out" colors
 * 
 * Accessibility Standards:
 * - WCAG 2.1 AA: 4.5:1 contrast for normal text
 * - WCAG 2.1 AA: 3:1 contrast for large text & UI components
 * - All interactive elements have visible focus states
 * 
 * =============================================================================
 */

/* =============================================================================
   SECTION 1: PRIMITIVE COLOR TOKENS (HSL Base Palette)
   ============================================================================= */

:root {
  /* ---------------------------------------------
     Brand Colors (HSL for easy manipulation)
     --------------------------------------------- */
  --hsl-brand-orange: 35, 98%, 55%;     /* Nerds Primary Orange */
  --hsl-brand-blue: 197, 99%, 46%;       /* Nerds Accent Blue */
  --hsl-brand-green: 160, 84%, 39%;      /* Secondary Accent */
  
  /* ---------------------------------------------
     Neutral Scale (Warm Gray - HSL)
     Using warm undertones (H: 30-40) for comfort
     --------------------------------------------- */
  /* Light Mode Neutrals */
  --hsl-neutral-50: 30, 15%, 97%;        /* Lightest */
  --hsl-neutral-100: 30, 12%, 93%;
  --hsl-neutral-200: 30, 10%, 88%;
  --hsl-neutral-300: 30, 8%, 78%;
  --hsl-neutral-400: 30, 6%, 58%;
  --hsl-neutral-500: 30, 5%, 45%;
  --hsl-neutral-600: 220, 10%, 35%;
  --hsl-neutral-700: 220, 12%, 28%;
  --hsl-neutral-800: 220, 15%, 20%;
  --hsl-neutral-900: 220, 18%, 13%;      /* Darkest */
  
  /* Dark Mode Base (Soft Dark - not true black) */
  --hsl-dark-base: 222, 47%, 8%;         /* #0b1021 equivalent */
  --hsl-dark-elevated-1: 222, 47%, 11%;  /* First elevation */
  --hsl-dark-elevated-2: 217, 33%, 17%;  /* Second elevation */
  --hsl-dark-elevated-3: 217, 27%, 23%;  /* Third elevation */
  
  /* ---------------------------------------------
     Semantic Status Colors (HSL)
     --------------------------------------------- */
  --hsl-success: 145, 63%, 42%;
  --hsl-success-light: 145, 63%, 95%;
  --hsl-success-dark: 160, 84%, 39%;
  
  --hsl-warning: 40, 96%, 48%;
  --hsl-warning-light: 40, 96%, 95%;
  --hsl-warning-dark: 40, 96%, 65%;
  
  --hsl-danger: 0, 72%, 51%;
  --hsl-danger-light: 0, 72%, 95%;
  --hsl-danger-dark: 0, 72%, 65%;
  
  --hsl-info: 210, 79%, 46%;
  --hsl-info-light: 210, 79%, 95%;
  --hsl-info-dark: 199, 89%, 48%;
}

/* =============================================================================
   SECTION 2: LIGHT THEME - SEMANTIC TOKENS
   ============================================================================= */

:root,
[data-theme="light"] {
  /* ---------------------------------------------
     SURFACE TOKENS (Backgrounds & Containers)
     Using elevation concept: higher = lighter
     --------------------------------------------- */
  --surface-ground: hsl(30, 12%, 89%);           /* Page background - darker for contrast */
  --surface-primary: hsl(30, 15%, 97%);          /* Cards, modals - white-ish */
  --surface-secondary: hsl(30, 12%, 93%);        /* Secondary containers */
  --surface-tertiary: hsl(30, 10%, 88%);         /* Nested elements */
  --surface-elevated: hsl(0, 0%, 100%);          /* Popovers, dropdowns */
  --surface-sunken: hsl(30, 10%, 85%);           /* Inputs, wells */
  --surface-overlay: hsla(220, 15%, 20%, 0.5);   /* Modal backdrop */
  
  /* Interactive surfaces */
  --surface-interactive: hsla(30, 8%, 50%, 0.06);
  --surface-interactive-hover: hsla(30, 8%, 50%, 0.12);
  --surface-interactive-active: hsla(30, 8%, 50%, 0.18);
  
  /* ---------------------------------------------
     CONTENT TOKENS (Text & Icons)
     Ensuring WCAG AA contrast ratios
     --------------------------------------------- */
  --content-primary: hsl(220, 15%, 20%);         /* Main text: 7:1 contrast */
  --content-secondary: hsl(220, 10%, 35%);       /* Secondary: 5:1 contrast */
  --content-tertiary: hsl(30, 5%, 45%);          /* Muted: 4.5:1 contrast */
  --content-disabled: hsl(30, 6%, 58%);          /* Disabled state */
  --content-inverse: hsl(0, 0%, 100%);           /* Text on dark backgrounds */
  --content-on-brand: hsl(0, 0%, 100%);          /* Text on brand colors */
  
  /* Link colors */
  --content-link: hsl(210, 79%, 46%);
  --content-link-hover: hsl(210, 79%, 36%);
  --content-link-visited: hsl(270, 50%, 45%);
  
  /* ---------------------------------------------
     BORDER TOKENS
     --------------------------------------------- */
  --border-default: hsla(30, 8%, 50%, 0.12);
  --border-strong: hsla(30, 8%, 50%, 0.20);
  --border-subtle: hsla(30, 8%, 50%, 0.06);
  --border-focus: hsl(var(--hsl-brand-blue));
  --border-error: hsl(var(--hsl-danger));
  
  /* ---------------------------------------------
     BRAND & INTERACTION TOKENS
     --------------------------------------------- */
  --brand-primary: hsl(var(--hsl-brand-orange));
  --brand-primary-hover: hsl(35, 98%, 48%);      /* Darker on hover */
  --brand-primary-active: hsl(35, 98%, 42%);
  --brand-primary-subtle: hsla(35, 98%, 55%, 0.12);
  
  --brand-accent: hsl(var(--hsl-brand-blue));
  --brand-accent-hover: hsl(197, 99%, 38%);
  --brand-accent-active: hsl(197, 99%, 32%);
  --brand-accent-subtle: hsla(197, 99%, 46%, 0.12);
  
  /* Focus ring - high visibility */
  --focus-ring: 0 0 0 3px hsla(197, 99%, 46%, 0.4);
  --focus-ring-error: 0 0 0 3px hsla(0, 72%, 51%, 0.4);
  
  /* ---------------------------------------------
     ELEVATION TOKENS (Shadows)
     Light mode uses softer, warmer shadows
     --------------------------------------------- */
  --elevation-1: 0 1px 2px hsla(220, 15%, 20%, 0.06),
                 0 1px 3px hsla(220, 15%, 20%, 0.10);
  --elevation-2: 0 2px 4px hsla(220, 15%, 20%, 0.06),
                 0 4px 8px hsla(220, 15%, 20%, 0.10);
  --elevation-3: 0 4px 8px hsla(220, 15%, 20%, 0.06),
                 0 8px 16px hsla(220, 15%, 20%, 0.10);
  --elevation-4: 0 8px 16px hsla(220, 15%, 20%, 0.08),
                 0 16px 32px hsla(220, 15%, 20%, 0.12);
  
  /* ---------------------------------------------
     NAVBAR-SPECIFIC TOKENS (Critical for visibility)
     --------------------------------------------- */
  --navbar-bg: hsl(30, 12%, 92%);
  --navbar-bg-blur: hsla(30, 12%, 92%, 0.92);
  --navbar-border: hsla(30, 8%, 50%, 0.15);
  --navbar-shadow: 0 1px 3px hsla(220, 15%, 20%, 0.08),
                   0 4px 12px hsla(220, 15%, 20%, 0.05);
  --navbar-text: hsl(220, 15%, 20%);
  --navbar-text-muted: hsl(220, 10%, 40%);
  --navbar-text-active: hsl(0, 0%, 100%);
  --navbar-item-hover: hsla(30, 8%, 50%, 0.10);
  --navbar-item-active-bg: hsl(var(--hsl-brand-blue));
  
  /* ---------------------------------------------
     STATUS TOKENS
     --------------------------------------------- */
  --status-success: hsl(var(--hsl-success));
  --status-success-bg: hsl(var(--hsl-success-light));
  --status-success-border: hsla(145, 63%, 42%, 0.3);
  
  --status-warning: hsl(var(--hsl-warning));
  --status-warning-bg: hsl(var(--hsl-warning-light));
  --status-warning-border: hsla(40, 96%, 48%, 0.3);
  
  --status-danger: hsl(var(--hsl-danger));
  --status-danger-bg: hsl(var(--hsl-danger-light));
  --status-danger-border: hsla(0, 72%, 51%, 0.3);
  
  --status-info: hsl(var(--hsl-info));
  --status-info-bg: hsl(var(--hsl-info-light));
  --status-info-border: hsla(210, 79%, 46%, 0.3);

  --status-secondary: hsl(220, 9%, 46%);
  --status-secondary-bg: hsla(220, 9%, 46%, 0.12);
  --status-secondary-border: hsla(220, 9%, 46%, 0.3);

  --status-primary: hsl(var(--hsl-brand-blue));
  --status-primary-bg: hsla(197, 99%, 46%, 0.12);
  --status-primary-border: hsla(197, 99%, 46%, 0.3);

  /* ---------------------------------------------
     PAYMENT METHOD TOKENS (category identity, NOT status -
     see badge contract comment at SECTION 11)
     --------------------------------------------- */
  --pm-cash: var(--status-success);
  --pm-cash-bg: var(--status-success-bg);
  --pm-card: var(--status-primary);
  --pm-card-bg: var(--status-primary-bg);
  --pm-bank-transfer: hsl(170, 60%, 38%);
  --pm-bank-transfer-bg: hsla(170, 60%, 38%, 0.12);
  --pm-loyalty: var(--status-warning);
  --pm-loyalty-bg: var(--status-warning-bg);
  --pm-giftcard: hsl(262, 83%, 58%);
  --pm-giftcard-bg: hsla(262, 83%, 58%, 0.12);
  --pm-iris: hsl(190, 78%, 38%);
  --pm-iris-bg: hsla(190, 78%, 38%, 0.12);
  --pm-mixed: hsl(243, 75%, 59%);
  --pm-mixed-bg: hsla(243, 75%, 59%, 0.12);
  --pm-on-account: hsl(28, 90%, 40%);
  --pm-on-account-bg: hsla(28, 90%, 40%, 0.12);
  --pm-other: var(--status-secondary);
  --pm-other-bg: var(--status-secondary-bg);

  /* ---------------------------------------------
     SCROLLBAR TOKENS
     --------------------------------------------- */
  --scrollbar-track: hsl(30, 10%, 88%);
  --scrollbar-thumb: hsl(30, 8%, 72%);
  --scrollbar-thumb-hover: hsl(30, 8%, 62%);
}

/* =============================================================================
   SECTION 3: DARK THEME - SEMANTIC TOKENS
   Using "Soft Dark" strategy (not true black) for reduced eye strain
   ============================================================================= */

[data-theme="dark"] {
  /* ---------------------------------------------
     SURFACE TOKENS
     Dark mode uses elevation = brightness increase
     --------------------------------------------- */
  --surface-ground: hsl(var(--hsl-dark-base));           /* #0b1021 */
  --surface-primary: hsl(var(--hsl-dark-elevated-2));    /* Cards */
  --surface-secondary: hsl(var(--hsl-dark-elevated-1));  /* Secondary */
  --surface-tertiary: hsl(var(--hsl-dark-elevated-3));   /* Nested */
  --surface-elevated: hsl(217, 27%, 20%);                /* Popovers */
  --surface-sunken: hsl(222, 47%, 6%);                   /* Inputs */
  --surface-overlay: hsla(222, 47%, 5%, 0.8);
  
  /* Interactive surfaces - use white alpha for consistency */
  --surface-interactive: hsla(0, 0%, 100%, 0.04);
  --surface-interactive-hover: hsla(0, 0%, 100%, 0.08);
  --surface-interactive-active: hsla(0, 0%, 100%, 0.12);
  
  /* ---------------------------------------------
     CONTENT TOKENS
     Light text on dark - softer than pure white
     --------------------------------------------- */
  --content-primary: hsl(220, 20%, 92%);         /* Main text */
  --content-secondary: hsl(215, 16%, 65%);       /* Secondary */
  --content-tertiary: hsl(215, 13%, 50%);        /* Muted */
  --content-disabled: hsl(215, 10%, 40%);
  --content-inverse: hsl(220, 15%, 15%);
  --content-on-brand: hsl(0, 0%, 100%);
  
  /* Links in dark mode */
  --content-link: hsl(199, 89%, 58%);
  --content-link-hover: hsl(199, 89%, 68%);
  --content-link-visited: hsl(270, 60%, 70%);
  
  /* ---------------------------------------------
     BORDER TOKENS
     --------------------------------------------- */
  --border-default: hsla(0, 0%, 100%, 0.10);
  --border-strong: hsla(0, 0%, 100%, 0.18);
  --border-subtle: hsla(0, 0%, 100%, 0.05);
  --border-focus: hsl(var(--hsl-brand-blue));
  --border-error: hsl(var(--hsl-danger-dark));
  
  /* ---------------------------------------------
     BRAND TOKENS (Slightly adjusted for dark mode)
     --------------------------------------------- */
  --brand-primary: hsl(35, 98%, 55%);
  --brand-primary-hover: hsl(35, 98%, 62%);      /* Lighter on hover in dark */
  --brand-primary-active: hsl(35, 98%, 68%);
  --brand-primary-subtle: hsla(35, 98%, 55%, 0.18);
  
  --brand-accent: hsl(199, 89%, 58%);            /* Brighter blue */
  --brand-accent-hover: hsl(199, 89%, 65%);
  --brand-accent-active: hsl(199, 89%, 72%);
  --brand-accent-subtle: hsla(199, 89%, 58%, 0.18);
  
  --focus-ring: 0 0 0 3px hsla(199, 89%, 58%, 0.5);
  --focus-ring-error: 0 0 0 3px hsla(0, 72%, 65%, 0.5);
  
  /* ---------------------------------------------
     ELEVATION TOKENS
     Dark mode: elevation increases brightness
     --------------------------------------------- */
  --elevation-1: 0 1px 2px hsla(0, 0%, 0%, 0.25),
                 0 1px 3px hsla(0, 0%, 0%, 0.35);
  --elevation-2: 0 2px 4px hsla(0, 0%, 0%, 0.25),
                 0 4px 8px hsla(0, 0%, 0%, 0.35);
  --elevation-3: 0 4px 8px hsla(0, 0%, 0%, 0.30),
                 0 8px 16px hsla(0, 0%, 0%, 0.40);
  --elevation-4: 0 8px 16px hsla(0, 0%, 0%, 0.35),
                 0 16px 32px hsla(0, 0%, 0%, 0.45);
  
  /* ---------------------------------------------
     NAVBAR TOKENS (Dark Mode)
     Using subtle elevation & border for visibility
     --------------------------------------------- */
  --navbar-bg: hsl(var(--hsl-dark-elevated-1));
  --navbar-bg-blur: hsla(222, 47%, 11%, 0.95);
  --navbar-border: hsla(0, 0%, 100%, 0.08);
  --navbar-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.05),
                   0 4px 12px hsla(0, 0%, 0%, 0.3);
  --navbar-text: hsl(220, 20%, 92%);
  --navbar-text-muted: hsl(215, 16%, 60%);
  --navbar-text-active: hsl(0, 0%, 100%);
  --navbar-item-hover: hsla(0, 0%, 100%, 0.08);
  --navbar-item-active-bg: hsl(var(--hsl-brand-blue));
  
  /* ---------------------------------------------
     STATUS TOKENS (Brighter for dark backgrounds)
     --------------------------------------------- */
  --status-success: hsl(var(--hsl-success-dark));
  --status-success-bg: hsla(160, 84%, 39%, 0.15);
  --status-success-border: hsla(160, 84%, 39%, 0.35);
  
  --status-warning: hsl(var(--hsl-warning-dark));
  --status-warning-bg: hsla(40, 96%, 65%, 0.15);
  --status-warning-border: hsla(40, 96%, 65%, 0.35);
  
  --status-danger: hsl(var(--hsl-danger-dark));
  --status-danger-bg: hsla(0, 72%, 65%, 0.15);
  --status-danger-border: hsla(0, 72%, 65%, 0.35);
  
  --status-info: hsl(var(--hsl-info-dark));
  --status-info-bg: hsla(199, 89%, 48%, 0.15);
  --status-info-border: hsla(199, 89%, 48%, 0.35);

  --status-secondary: hsl(215, 16%, 65%);
  --status-secondary-bg: hsla(215, 16%, 65%, 0.15);
  --status-secondary-border: hsla(215, 16%, 65%, 0.35);

  --status-primary: hsl(199, 89%, 58%);
  --status-primary-bg: hsla(199, 89%, 58%, 0.15);
  --status-primary-border: hsla(199, 89%, 58%, 0.35);

  --pm-cash: var(--status-success);
  --pm-cash-bg: var(--status-success-bg);
  --pm-card: var(--status-primary);
  --pm-card-bg: var(--status-primary-bg);
  --pm-bank-transfer: hsl(170, 70%, 55%);
  --pm-bank-transfer-bg: hsla(170, 70%, 55%, 0.15);
  --pm-loyalty: var(--status-warning);
  --pm-loyalty-bg: var(--status-warning-bg);
  --pm-giftcard: hsl(262, 90%, 72%);
  --pm-giftcard-bg: hsla(262, 90%, 72%, 0.15);
  --pm-iris: hsl(190, 85%, 60%);
  --pm-iris-bg: hsla(190, 85%, 60%, 0.15);
  --pm-mixed: hsl(243, 85%, 72%);
  --pm-mixed-bg: hsla(243, 85%, 72%, 0.15);
  --pm-on-account: hsl(28, 95%, 62%);
  --pm-on-account-bg: hsla(28, 95%, 62%, 0.15);
  --pm-other: var(--status-secondary);
  --pm-other-bg: var(--status-secondary-bg);

  /* ---------------------------------------------
     SCROLLBAR TOKENS
     --------------------------------------------- */
  --scrollbar-track: hsl(var(--hsl-dark-elevated-2));
  --scrollbar-thumb: hsl(215, 20%, 35%);
  --scrollbar-thumb-hover: hsl(215, 20%, 45%);
}

/* =============================================================================
   SECTION 4: COMPONENT TOKENS (LEGACY COMPATIBILITY BRIDGE)
   Maps new semantic tokens to existing variable names for gradual migration
   ============================================================================= */

:root,
[data-theme="light"],
[data-theme="dark"] {
  /* Map to legacy --theme-* variables */
  --theme-primary: var(--brand-primary);
  --theme-primary-rgb: 253, 160, 31;
  --theme-accent: var(--brand-accent);
  --theme-accent-rgb: 1, 167, 233;
  
  --theme-bg-primary: var(--surface-ground);
  --theme-bg-secondary: var(--surface-secondary);
  --theme-bg-tertiary: var(--surface-tertiary);
  --theme-bg-surface: var(--surface-interactive);
  --theme-bg-surface-strong: var(--surface-interactive-hover);
  --theme-bg-card: var(--surface-primary);
  --theme-bg-modal: var(--surface-elevated);
  --theme-bg-navbar: var(--navbar-bg-blur);
  --theme-bg-input: var(--surface-sunken);
  
  --theme-text-primary: var(--content-primary);
  --theme-text-secondary: var(--content-secondary);
  --theme-text-muted: var(--content-tertiary);
  --theme-text-inverse: var(--content-inverse);
  
  --theme-border-color: var(--border-default);
  --theme-border-strong: var(--border-strong);
  --theme-card-border: var(--border-subtle);
  
  --theme-shadow-sm: var(--elevation-1);
  --theme-shadow-md: var(--elevation-2);
  --theme-shadow-lg: var(--elevation-3);
  --theme-shadow-xl: var(--elevation-4);
  
  --theme-success: var(--status-success);
  --theme-success-bg: var(--status-success-bg);
  --theme-warning: var(--status-warning);
  --theme-warning-bg: var(--status-warning-bg);
  --theme-danger: var(--status-danger);
  --theme-danger-bg: var(--status-danger-bg);
  --theme-info: var(--status-info);
  --theme-info-bg: var(--status-info-bg);
}

/* =============================================================================
   SECTION 5: BASE ELEMENT STYLES
   ============================================================================= */

/* Body - Theme Foundation */
body {
  background: var(--surface-ground);
  color: var(--content-primary);
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Light mode subtle texture */
[data-theme="light"] body {
  background: var(--surface-ground);
  background-image: 
    radial-gradient(ellipse at 20% 80%, hsla(35, 98%, 55%, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, hsla(197, 99%, 46%, 0.025) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Dark mode subtle texture */
[data-theme="dark"] body {
  background: var(--surface-ground);
  background-image: 
    radial-gradient(ellipse at 20% 80%, hsla(35, 98%, 55%, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, hsla(197, 99%, 46%, 0.04) 0%, transparent 50%);
  background-attachment: fixed;
}

/* =============================================================================
   SECTION 6: NAVBAR COMPONENT STYLES (Critical for visibility)
   ============================================================================= */

/* Top Navbar */
.top-navbar {
  background: var(--navbar-bg-blur);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--navbar-border);
  box-shadow: var(--navbar-shadow);
  color: var(--navbar-text);
}

.top-navbar .brand-text .nerds {
  color: var(--brand-primary);
}

.top-navbar .brand-text .tech {
  color: var(--brand-accent);
}

.top-navbar .navbar-title {
  color: var(--navbar-text);
  font-weight: 600;
}

/* Left Sidebar (was bottom navbar) */
.bottom-navbar {
  background: var(--navbar-bg-blur);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid var(--navbar-border);
  box-shadow: 2px 0 12px hsla(0, 0%, 0%, 0.07);
}

[data-theme="dark"] .bottom-navbar {
  box-shadow: 1px 0 0 var(--navbar-border),
              2px 0 16px hsla(0, 0%, 0%, 0.3);
}

/* Navbar Links - Critical contrast fix */
.bottom-navbar .nav-link {
  color: var(--navbar-text-muted);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.bottom-navbar .nav-link:hover {
  color: var(--navbar-text);
  background: var(--navbar-item-hover);
}

.bottom-navbar .nav-link.active {
  color: var(--navbar-text-active) !important;
  background: var(--navbar-item-active-bg) !important;
}

/* Top Navbar Actions */
.top-navbar .btn-icon {
  color: var(--navbar-text);
  background: var(--surface-interactive);
  border: 1px solid var(--border-subtle);
  transition: all 0.15s ease;
}

.top-navbar .btn-icon:hover {
  background: var(--surface-interactive-hover);
  border-color: var(--border-default);
}

/* User Avatar in Navbar */
.navbar-user-avatar {
  background: var(--navbar-item-active-bg);
  color: var(--content-on-brand);
}

.navbar-user-btn {
  color: var(--navbar-text);
}

.navbar-user-btn:hover {
  background: var(--navbar-item-hover);
}

/* Dropdown Menu */
.navbar-dropdown {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  box-shadow: var(--elevation-3);
}

.navbar-dropdown-item {
  color: var(--content-primary);
}

.navbar-dropdown-item:hover {
  background: var(--surface-interactive-hover);
  color: var(--content-primary);
}

.navbar-dropdown-divider {
  background: var(--border-default);
}

/* =============================================================================
   SECTION 7: CARD COMPONENT STYLES
   ============================================================================= */

.card,
.cashier-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elevation-2);
  color: var(--content-primary);
  border-radius: 12px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover,
.cashier-card:hover {
  box-shadow: var(--elevation-3);
  transform: translateY(-2px);
}

.card-header,
.cashier-card-header {
  background: var(--surface-interactive);
  border-bottom: 1px solid var(--border-default);
  color: var(--content-primary);
}

.card-body,
.cashier-card-body {
  color: var(--content-primary);
}

/* =============================================================================
   SECTION 8: FORM CONTROLS
   ============================================================================= */

.form-control,
.cashier-form-control,
.form-select,
.cashier-form-select {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  color: var(--content-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder,
.cashier-form-control::placeholder {
  color: var(--content-tertiary);
}

.form-control:focus,
.cashier-form-control:focus,
.form-select:focus,
.cashier-form-select:focus {
  background: var(--surface-sunken);
  border-color: var(--brand-accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.form-control:disabled,
.cashier-form-control:disabled {
  background: var(--surface-interactive);
  color: var(--content-disabled);
  cursor: not-allowed;
}

.form-label,
.cashier-form-label {
  color: var(--content-secondary);
  font-weight: 500;
}

/* =============================================================================
   SECTION 9: TABLE STYLES
   ============================================================================= */

.table,
.cashier-table {
  color: var(--content-primary);
}

.table thead th,
.cashier-table thead th {
  background: var(--surface-interactive);
  color: var(--content-primary);
  font-weight: 600;
  border-color: var(--border-default);
}

.table td,
.table th,
.cashier-table td,
.cashier-table th {
  border-color: var(--border-subtle);
}

.table tbody tr:hover,
.cashier-table tbody tr:hover {
  background: var(--surface-interactive-hover);
}

.table-striped tbody tr:nth-of-type(odd),
.cashier-table-striped tbody tr:nth-of-type(odd) {
  background: var(--surface-interactive);
}

/* =============================================================================
   SECTION 10: BUTTON STYLES
   ============================================================================= */

.btn-primary {
  background: var(--navbar-item-active-bg);
  border: none;
  color: var(--content-on-brand);
  font-weight: 500;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--elevation-2);
  filter: brightness(1.05);
}

.btn-primary:focus {
  box-shadow: var(--focus-ring);
}

.btn-secondary,
.btn-outline-secondary {
  background: var(--surface-interactive);
  border: 1px solid var(--border-default);
  color: var(--content-secondary);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: var(--surface-interactive-hover);
  color: var(--content-primary);
  border-color: var(--border-strong);
}

/* =============================================================================
   SECTION 11: ALERT/STATUS BADGES
   ============================================================================= */

.alert-success,
.badge-success {
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  color: var(--status-success);
}

.alert-warning,
.badge-warning {
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
  color: var(--status-warning);
}

.alert-danger,
.badge-danger {
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  color: var(--status-danger);
}

.alert-info,
.badge-info {
  background: var(--status-info-bg);
  border: 1px solid var(--status-info-border);
  color: var(--status-info);
}

.badge-secondary {
  background: var(--status-secondary-bg);
  border: 1px solid var(--status-secondary-border);
  color: var(--status-secondary);
}

.badge-primary {
  background: var(--status-primary-bg);
  border: 1px solid var(--status-primary-border);
  color: var(--status-primary);
}

/*
 * Canonical badge/status-pill contract (see memory: badge-status-contract).
 * Any per-module status enum maps onto ONE of these 6 semantic classes by
 * meaning, not by inventing new hex per state. Bootstrap's `.badge` supplies
 * shape; one of `.badge-success/-warning/-danger/-info/-secondary/-primary`
 * supplies color, always via the --status-* tokens above (theme-aware).
 *   success   = completed / paid / active / approved
 *   warning   = pending / waiting / needs attention
 *   danger    = cancelled / failed / expired / rejected
 *   info      = in progress / scheduled / informational
 *   secondary = neutral / draft / inactive / disabled
 *   primary   = highlighted / featured / new
 * Static category labels (payment method, customer type, device brand) are
 * NOT status - they don't carry workflow meaning, so don't force them onto
 * these classes; a plain `.badge-secondary` (neutral) is enough for those.
 */

/* =============================================================================
   SECTION 12: SCROLLBAR STYLES
   ============================================================================= */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  transition: background 0.15s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* =============================================================================
   SECTION 13: UTILITY CLASSES
   ============================================================================= */

/* Text utilities */
.text-primary { color: var(--content-primary) !important; }
.text-secondary { color: var(--content-secondary) !important; }
.text-muted { color: var(--content-tertiary) !important; }
.text-brand { color: var(--brand-primary) !important; }
.text-accent { color: var(--brand-accent) !important; }
.text-success { color: var(--status-success) !important; }
.text-warning { color: var(--status-warning) !important; }
.text-danger { color: var(--status-danger) !important; }
.text-info { color: var(--status-info) !important; }

/* Background utilities */
.bg-surface { background: var(--surface-primary) !important; }
.bg-surface-secondary { background: var(--surface-secondary) !important; }
.bg-interactive { background: var(--surface-interactive) !important; }

/* Border utilities */
.border-subtle { border-color: var(--border-subtle) !important; }
.border-default { border-color: var(--border-default) !important; }
.border-strong { border-color: var(--border-strong) !important; }

/* =============================================================================
   SECTION 14: ACCESSIBILITY ENHANCEMENTS
   ============================================================================= */

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root,
  [data-theme="light"] {
    --border-default: hsla(30, 8%, 30%, 0.3);
    --border-strong: hsla(30, 8%, 30%, 0.5);
    --content-secondary: hsl(220, 12%, 30%);
  }
  
  [data-theme="dark"] {
    --border-default: hsla(0, 0%, 100%, 0.25);
    --border-strong: hsla(0, 0%, 100%, 0.4);
    --content-secondary: hsl(215, 16%, 75%);
  }
}