/**
 * OTP Design System - Base Styles
 * Core CSS variables, resets, typography, and theme foundations
 * Part of Phase 3: CSS Consolidation
 *
 * This file contains:
 * - CSS custom property definitions for all three themes
 * - Semantic color system
 * - Typography system
 * - Spacing system
 * - Component token definitions
 * - Basic element resets and defaults
 * - Theme class switching support
 */

/* ============================================================================
   THEME 1: SIMPLE (Default)
   High-density, information-focused, minimal whitespace
   Best for: Admin dashboards, data-heavy applications
   ============================================================================ */
:root {
  /* =========================================================================
     TYPOGRAPHY SYSTEM
     ========================================================================= */
  --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'Monaco', 'Menlo', 'Courier New', monospace;
  --font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Base font size and line height */
  --font-size-base: 14px;
  --line-height-base: 1.4;
  --font-weight-base: 400;

  /* Font size scale */
  --font-size-xs: 0.75rem;    /* 12px - tiny labels, help text */
  --font-size-sm: 0.875rem;   /* 14px - labels, small text */
  --font-size-md: 1rem;       /* 16px - body text on some themes */
  --font-size-lg: 1.25rem;    /* 20px - larger text */
  --font-size-xl: 1.5rem;     /* 24px - headings */
  --font-size-xxl: 2rem;      /* 32px - page titles */

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  /* Letter spacing */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;

  /* Typography spacing */
  --typography-spacing-vertical: 0.75rem;

  /* =========================================================================
     SPACING SYSTEM (8px base unit)
     ========================================================================= */
  --spacing-xs: 0.25rem;      /* 4px - minimal gaps */
  --spacing-sm: 0.5rem;       /* 8px - small gaps */
  --spacing-md: 1rem;         /* 16px - default spacing */
  --spacing-lg: 1.5rem;       /* 24px - large gaps */
  --spacing-xl: 2rem;         /* 32px - extra large */
  --spacing-xxl: 3rem;        /* 48px - massive */

  /* Container and layout spacing */
  --spacing-block-vertical: 0.75rem;
  --spacing-block-horizontal: 0.75rem;

  /* =========================================================================
     COLOR SYSTEM - SEMANTIC COLORS
     ========================================================================= */

  /* Simple/Professional Theme - Ionic Colors
     Clean, trustworthy, enterprise-friendly */

  /* Primary color - action, focus, primary buttons */
  --color-primary: #3880ff;
  --color-primary-hover: #3171e0;
  --color-primary-active: #2a62c2;
  --color-primary-light: #d9e5ff;

  /* Secondary color - light blue */
  --color-secondary: #3dc2ff;
  --color-secondary-hover: #36abe0;
  --color-secondary-light: #d9f2ff;

  /* Status colors */
  --color-success: #2dd36f;
  --color-success-light: #d4f7e3;
  --color-warning: #ffc409;
  --color-warning-light: #fff4d4;
  --color-danger: #eb445a;
  --color-danger-light: #fde0e4;
  --color-info: #3dc2ff;
  --color-info-light: #d9f2ff;

  /* Ionic theme colors */
  --color-dark: #222428;
  --color-medium: #92949c;
  --color-light: #f4f5f8;

  /* =========================================================================
     COLOR SYSTEM - NEUTRAL GRAYS (Grayscale)
     ========================================================================= */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* =========================================================================
     COLOR SYSTEM - TEXT & BACKGROUND
     ========================================================================= */
  --color-text: #222428;
  --color-text-secondary: #92949c;
  --color-text-muted: #92949c;
  --color-text-inverse: #ffffff;

  /* Background colors - Pure white for professional/clean look */
  --color-bg: #ffffff;
  --color-bg-secondary: #f4f5f8;
  --color-bg-tertiary: #e8e9ed;

  --color-border: #d7d8dd;
  --color-border-light: #e8e9ed;
  --color-border-dark: #92949c;

  /* =========================================================================
     COMPONENT TOKENS - BUTTONS
     ========================================================================= */
  --button-padding-vertical: 0.5rem;
  --button-padding-horizontal: 0.75rem;
  --button-font-size: 0.9rem;
  --button-border-radius: 0.25rem;
  --button-transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;

  /* =========================================================================
     COMPONENT TOKENS - FORMS
     ========================================================================= */
  --form-element-padding-vertical: 0.5rem;
  --form-element-padding-horizontal: 0.75rem;
  --form-element-font-size: 0.9rem;
  --form-element-border-radius: 0.25rem;
  --form-element-border: 1px solid #e5e7eb;
  --form-element-transition: border-color 150ms ease, box-shadow 150ms ease;

  /* =========================================================================
     COMPONENT TOKENS - CARDS & CONTAINERS
     ========================================================================= */
  --card-padding: 0.75rem;
  --card-border-radius: 0.25rem;
  --card-border: 1px solid #e5e7eb;
  --card-shadow: none;
  --card-background: #ffffff;

  /* =========================================================================
     COMPONENT TOKENS - TABLES
     ========================================================================= */
  --table-padding: 0.5rem 0.75rem;
  --table-border-color: #e5e7eb;
  --table-header-background: #f9fafb;
  --table-header-font-size: 0.75rem;
  --table-font-size: 0.9rem;

  /* =========================================================================
     COMPONENT TOKENS - BADGES
     ========================================================================= */
  --badge-padding: 0.25rem 0.5rem;
  --badge-font-size: 0.75rem;
  --badge-border-radius: 0.25rem;
  --badge-font-weight: 600;

  /* =========================================================================
     COMPONENT TOKENS - NAVIGATION
     ========================================================================= */
  --nav-element-padding-vertical: 0.5rem;
  --nav-element-padding-horizontal: 0.75rem;
  --nav-link-padding-vertical: 0.5rem;
  --nav-link-padding-horizontal: 0.75rem;

  /* =========================================================================
     LAYOUT TOKENS
     ========================================================================= */
  --container-max-width: 1200px;
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --header-height: 60px;

  /* =========================================================================
     ANIMATION & TRANSITION TOKENS
     ========================================================================= */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* =========================================================================
     SHADOW TOKENS (Subtle - Simple Theme)
     ========================================================================= */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;

  /* =========================================================================
     PICO CSS VARIABLE OVERRIDES - Simple Theme
     ========================================================================= */
  --pico-font-size: 14px;
  --pico-line-height: 1.4;
  --pico-font-weight: 400;
  --pico-font-size-h1: 1.5rem;
  --pico-font-size-h2: 1.25rem;
  --pico-font-size-h3: 1.1rem;
  --pico-font-size-h4: 1rem;
  --pico-font-size-h5: 0.95rem;
  --pico-font-size-h6: 0.9rem;
  --pico-typography-spacing-vertical: 0.75rem;
  --pico-spacing: 0.75rem;
  --pico-block-spacing-vertical: 0.75rem;
  --pico-block-spacing-horizontal: 0.75rem;
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
  --pico-border-radius: 0.25rem;
  --pico-nav-element-spacing-vertical: 0.5rem;
  --pico-nav-element-spacing-horizontal: 0.75rem;
  --pico-nav-link-spacing-vertical: 0.5rem;
  --pico-nav-link-spacing-horizontal: 0.75rem;
  --pico-table-border-width: 1px;

  /* Pico CSS Color Mappings - Simple Theme */
  --pico-primary: var(--color-primary);
  --pico-primary-hover: var(--color-primary-hover);
  --pico-primary-focus: var(--color-primary-hover);
  --pico-primary-inverse: #ffffff;
  --pico-primary-underline: var(--color-primary-hover);
  --pico-primary-background: var(--color-primary);
  --pico-primary-hover-background: var(--color-primary-hover);

  --pico-secondary: var(--color-secondary);
  --pico-secondary-hover: var(--color-secondary-hover);
  --pico-secondary-focus: var(--color-secondary-hover);
  --pico-secondary-inverse: #ffffff;
  --pico-secondary-background: var(--color-secondary);
  --pico-secondary-hover-background: var(--color-secondary-hover);

  --pico-contrast: var(--color-primary);
  --pico-contrast-hover: var(--color-primary-hover);
  --pico-contrast-focus: var(--color-primary-hover);

  --pico-color: var(--color-text);
  --pico-background-color: var(--color-bg);
  --pico-border-color: var(--color-border);

  --pico-muted-color: var(--color-text-muted);
  --pico-muted-border-color: var(--color-border-light);

  --pico-mark-background-color: var(--color-warning-light);
  --pico-mark-color: var(--color-text);

  --pico-ins-color: var(--color-success);
  --pico-del-color: var(--color-danger);

  --pico-card-background-color: var(--color-bg);
  --pico-card-border-color: var(--color-border);

  --pico-form-element-background-color: var(--color-bg);
  --pico-form-element-border-color: var(--color-border);
  --pico-form-element-color: var(--color-text);
  --pico-form-element-placeholder-color: var(--color-text-muted);
  --pico-form-element-active-background-color: var(--color-bg);
  --pico-form-element-active-border-color: var(--color-primary);
  --pico-form-element-focus-color: var(--color-primary);
  --pico-form-element-disabled-background-color: var(--color-bg-secondary);
  --pico-form-element-disabled-border-color: var(--color-border-light);
  --pico-form-element-disabled-opacity: 0.5;
  --pico-form-element-invalid-border-color: var(--color-danger);
  --pico-form-element-invalid-active-border-color: var(--color-danger);
  --pico-form-element-invalid-focus-color: var(--color-danger);
  --pico-form-element-valid-border-color: var(--color-success);
  --pico-form-element-valid-active-border-color: var(--color-success);
  --pico-form-element-valid-focus-color: var(--color-success);

  --pico-switch-background-color: var(--color-border);
  --pico-switch-checked-background-color: var(--color-primary);

  --pico-range-border-color: var(--color-border);
  --pico-range-active-border-color: var(--color-primary);
  --pico-range-thumb-background-color: var(--color-primary);
  --pico-range-thumb-hover-background-color: var(--color-primary-hover);

  --pico-table-border-color: var(--color-border);
  --pico-table-row-stripped-background-color: var(--color-bg-secondary);

  --pico-code-background-color: var(--color-bg-secondary);
  --pico-code-color: var(--color-text);
  --pico-code-kbd-background-color: var(--color-bg-tertiary);
  --pico-code-kbd-color: var(--color-text);

  --pico-accordion-border-color: var(--color-border);
  --pico-accordion-close-summary-color: var(--color-text-secondary);
  --pico-accordion-open-summary-color: var(--color-text);

  --pico-dropdown-background-color: var(--color-bg);
  --pico-dropdown-border-color: var(--color-border);
  --pico-dropdown-color: var(--color-text);
  --pico-dropdown-hover-background-color: var(--color-bg-secondary);

  --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.4);

  --pico-progress-background-color: var(--color-bg-secondary);
  --pico-progress-color: var(--color-primary);

  --pico-loading-spinner-opacity: 0.5;

  --pico-tooltip-background-color: var(--color-gray-900);
  --pico-tooltip-color: #ffffff;

  --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");

  --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");

  --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");

  --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");

  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");

  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

/* ============================================================================
   THEME 2: MODERN
   Sophisticated, warm, approachable with Tuscan Sun palette
   Best for: Customer-facing applications
   ============================================================================ */
:root.theme-modern {
  /* Modern Theme - Forest Green & Amber Palette
     Natural, trustworthy, eco-friendly, professional */

  /* Primary color - Forest Green (action buttons, links) */
  --color-primary: #059669;
  --color-primary-hover: #047857;
  --color-primary-active: #065f46;
  --color-primary-light: #d1fae5;

  /* Secondary color - Warm Amber (accents, secondary actions) */
  --color-secondary: #f59e0b;
  --color-secondary-hover: #d97706;
  --color-secondary-light: #fef3c7;

  /* Status colors - harmonized with green/amber palette */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-info: #0891b2;
  --color-info-light: #cffafe;

  /* Text colors - Warm neutrals */
  --color-text: #1f2937;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-inverse: #ffffff;

  /* Background colors - Subtle green tint matching forest green theme */
  --color-bg: #f0fdf4;
  --color-bg-secondary: #dcfce7;
  --color-bg-tertiary: #bbf7d0;

  /* Border colors */
  --color-border: #d1d5db;
  --color-border-light: #e5e7eb;
  --color-border-dark: #9ca3af;

  /* Pico CSS Color Mappings - Modern Theme */
  --pico-primary: var(--color-primary);
  --pico-primary-hover: var(--color-primary-hover);
  --pico-primary-focus: var(--color-primary-hover);
  --pico-primary-inverse: #ffffff;  /* White text on teal buttons - WCAG AAA */
  --pico-primary-underline: var(--color-primary-hover);
  --pico-primary-background: var(--color-primary);  /* Fixed: use primary, not primary-light */
  --pico-primary-hover-background: var(--color-primary-hover);

  --pico-secondary: var(--color-secondary);
  --pico-secondary-hover: var(--color-secondary-hover);
  --pico-secondary-focus: var(--color-secondary-hover);
  --pico-secondary-inverse: #ffffff;  /* White text on coral buttons - WCAG AA */
  --pico-secondary-background: var(--color-secondary);  /* Fixed: use secondary, not secondary-light */
  --pico-secondary-hover-background: var(--color-secondary-hover);

  --pico-contrast: var(--color-primary);
  --pico-contrast-hover: var(--color-primary-hover);
  --pico-contrast-focus: var(--color-primary-hover);

  --pico-color: var(--color-text);
  --pico-background-color: var(--color-bg);
  --pico-border-color: var(--color-border);

  --pico-muted-color: var(--color-text-muted);
  --pico-muted-border-color: var(--color-border-light);

  --pico-mark-background-color: var(--color-warning-light);
  --pico-mark-color: var(--color-text);

  --pico-ins-color: var(--color-success);
  --pico-del-color: var(--color-danger);

  --pico-card-background-color: var(--color-bg);
  --pico-card-border-color: var(--color-border);

  --pico-form-element-background-color: var(--color-bg);
  --pico-form-element-border-color: var(--color-border);
  --pico-form-element-color: var(--color-text);
  --pico-form-element-placeholder-color: var(--color-text-muted);
  --pico-form-element-active-background-color: var(--color-bg);
  --pico-form-element-active-border-color: var(--color-primary);
  --pico-form-element-focus-color: var(--color-primary);
  --pico-form-element-disabled-background-color: var(--color-bg-secondary);
  --pico-form-element-disabled-border-color: var(--color-border-light);
  --pico-form-element-disabled-opacity: 0.5;
  --pico-form-element-invalid-border-color: var(--color-danger);
  --pico-form-element-invalid-active-border-color: var(--color-danger);
  --pico-form-element-invalid-focus-color: var(--color-danger);
  --pico-form-element-valid-border-color: var(--color-success);
  --pico-form-element-valid-active-border-color: var(--color-success);
  --pico-form-element-valid-focus-color: var(--color-success);

  --pico-switch-background-color: var(--color-border);
  --pico-switch-checked-background-color: var(--color-primary);

  --pico-range-border-color: var(--color-border);
  --pico-range-active-border-color: var(--color-primary);
  --pico-range-thumb-background-color: var(--color-primary);
  --pico-range-thumb-hover-background-color: var(--color-primary-hover);

  --pico-table-border-color: var(--color-border);
  --pico-table-row-stripped-background-color: var(--color-bg-secondary);

  --pico-code-background-color: var(--color-bg-secondary);
  --pico-code-color: var(--color-text);
  --pico-code-kbd-background-color: var(--color-bg-tertiary);
  --pico-code-kbd-color: var(--color-text);

  --pico-accordion-border-color: var(--color-border);
  --pico-accordion-close-summary-color: var(--color-text-secondary);
  --pico-accordion-open-summary-color: var(--color-text);

  --pico-dropdown-background-color: var(--color-bg);
  --pico-dropdown-border-color: var(--color-border);
  --pico-dropdown-color: var(--color-text);
  --pico-dropdown-hover-background-color: var(--color-bg-secondary);

  --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.4);

  --pico-progress-background-color: var(--color-bg-secondary);
  --pico-progress-color: var(--color-primary);

  --pico-loading-spinner-opacity: 0.5;

  --pico-tooltip-background-color: var(--color-gray-900);
  --pico-tooltip-color: #ffffff;
}

/* ============================================================================
   THEME 3: BOLD
   Confident, energetic, memorable with Rebecca Purple palette
   Best for: Brand-focused applications
   ============================================================================ */
:root.theme-bold {
  /* Bold Theme - Red & Black Palette
     High-impact, powerful, aggressive, maximum contrast */

  /* Primary color - Bold Red (action buttons, brand identity) */
  --color-primary: #dc2626;
  --color-primary-hover: #b91c1c;
  --color-primary-active: #991b1b;
  --color-primary-light: #fee2e2;

  /* Accent color - Deep Black (CTAs, highlights) */
  --color-accent: #1f2937;
  --color-accent-hover: #111827;
  --color-accent-light: #f3f4f6;

  /* Secondary color - Deep Black for contrast */
  --color-secondary: #1f2937;
  --color-secondary-hover: #111827;
  --color-secondary-light: #f3f4f6;

  /* Status colors - high contrast */
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-warning: #eab308;
  --color-warning-light: #fef9c3;
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-info: #1f2937;
  --color-info-light: #f3f4f6;

  /* Text colors - high contrast */
  --color-text: #000000;
  --color-text-secondary: #525252;
  --color-text-muted: #737373;
  --color-text-inverse: #ffffff;

  /* Background colors - Subtle warm tint matching red/black theme */
  --color-bg: #fef2f2;
  --color-bg-secondary: #fee2e2;
  --color-bg-tertiary: #fecaca;

  /* Border colors */
  --color-border: #d4d4d4;
  --color-border-light: #e5e5e5;
  --color-border-dark: #737373;

  /* Pico CSS Color Mappings - Bold Theme */
  --pico-primary: var(--color-primary);
  --pico-primary-hover: var(--color-primary-hover);
  --pico-primary-focus: var(--color-primary-hover);
  --pico-primary-inverse: #ffffff;  /* White text on blue buttons - WCAG AA+ */
  --pico-primary-underline: var(--color-primary-hover);
  --pico-primary-background: var(--color-primary);
  --pico-primary-hover-background: var(--color-primary-hover);

  --pico-secondary: var(--color-secondary);
  --pico-secondary-hover: var(--color-secondary-hover);
  --pico-secondary-focus: var(--color-secondary-hover);
  --pico-secondary-inverse: #ffffff;  /* White text on orange buttons - WCAG AA */
  --pico-secondary-background: var(--color-secondary);
  --pico-secondary-hover-background: var(--color-secondary-hover);

  --pico-contrast: var(--color-primary);
  --pico-contrast-hover: var(--color-primary-hover);
  --pico-contrast-focus: var(--color-primary-hover);

  --pico-color: var(--color-text);
  --pico-background-color: var(--color-bg);
  --pico-border-color: var(--color-border);

  --pico-muted-color: var(--color-text-muted);
  --pico-muted-border-color: var(--color-border-light);

  --pico-mark-background-color: var(--color-warning-light);
  --pico-mark-color: var(--color-text);

  --pico-ins-color: var(--color-success);
  --pico-del-color: var(--color-danger);

  --pico-card-background-color: var(--color-bg);
  --pico-card-border-color: var(--color-border);

  --pico-form-element-background-color: var(--color-bg);
  --pico-form-element-border-color: var(--color-border);
  --pico-form-element-color: var(--color-text);
  --pico-form-element-placeholder-color: var(--color-text-muted);
  --pico-form-element-active-background-color: var(--color-bg);
  --pico-form-element-active-border-color: var(--color-primary);
  --pico-form-element-focus-color: var(--color-primary);
  --pico-form-element-disabled-background-color: var(--color-bg-secondary);
  --pico-form-element-disabled-border-color: var(--color-border-light);
  --pico-form-element-disabled-opacity: 0.5;
  --pico-form-element-invalid-border-color: var(--color-danger);
  --pico-form-element-invalid-active-border-color: var(--color-danger);
  --pico-form-element-invalid-focus-color: var(--color-danger);
  --pico-form-element-valid-border-color: var(--color-success);
  --pico-form-element-valid-active-border-color: var(--color-success);
  --pico-form-element-valid-focus-color: var(--color-success);

  --pico-switch-background-color: var(--color-border);
  --pico-switch-checked-background-color: var(--color-primary);

  --pico-range-border-color: var(--color-border);
  --pico-range-active-border-color: var(--color-primary);
  --pico-range-thumb-background-color: var(--color-primary);
  --pico-range-thumb-hover-background-color: var(--color-primary-hover);

  --pico-table-border-color: var(--color-border);
  --pico-table-row-stripped-background-color: var(--color-bg-secondary);

  --pico-code-background-color: var(--color-bg-secondary);
  --pico-code-color: var(--color-text);
  --pico-code-kbd-background-color: var(--color-bg-tertiary);
  --pico-code-kbd-color: var(--color-text);

  --pico-accordion-border-color: var(--color-border);
  --pico-accordion-close-summary-color: var(--color-text-secondary);
  --pico-accordion-open-summary-color: var(--color-text);

  --pico-dropdown-background-color: var(--color-bg);
  --pico-dropdown-border-color: var(--color-border);
  --pico-dropdown-color: var(--color-text);
  --pico-dropdown-hover-background-color: var(--color-bg-secondary);

  --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.4);

  --pico-progress-background-color: var(--color-bg-secondary);
  --pico-progress-color: var(--color-primary);

  --pico-loading-spinner-opacity: 0.5;

  --pico-tooltip-background-color: var(--color-gray-900);
  --pico-tooltip-color: #ffffff;
}

/* ============================================================================
   BASIC ELEMENT RESETS & DEFAULTS
   ============================================================================ */

body {
  font-size: var(--pico-font-size);
  line-height: var(--pico-line-height);
}

/* Compact container */
.container {
  padding: var(--pico-spacing);
}

/* Tighter article spacing */
article {
  padding: var(--pico-spacing);
  margin-bottom: var(--pico-block-spacing-vertical);
}

/* Smaller buttons */
button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"],
a[role="button"] {
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  font-size: 0.9rem;
}

/* Compact form elements */
input,
select,
textarea {
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  font-size: 0.9rem;
}

/* Tighter hgroup spacing */
hgroup {
  margin-bottom: var(--pico-typography-spacing-vertical);
}

hgroup > * {
  margin-bottom: 0.25rem;
}

/* Compact tables */
table {
  font-size: 0.9rem;
}

th,
td {
  padding: 0.5rem 0.75rem;
}

/* Tighter nav spacing */
nav ul li {
  padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
}

/* Smaller footer */
footer {
  padding: var(--pico-spacing);
  font-size: 0.85rem;
}

/* Reduce header/footer margins */
header.container,
footer.container {
  padding-top: var(--pico-spacing);
  padding-bottom: var(--pico-spacing);
}

main.container {
  padding-top: var(--pico-spacing);
  padding-bottom: var(--pico-spacing);
}

/* User avatar dropdown */
.user-avatar {
  padding: 0.5rem;
  width: 42px;
  height: 42px;
  border-radius: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

details.dropdown[open] summary {
  margin-bottom: 0;
}

details.dropdown ul {
  min-width: 200px;
}

details.dropdown ul li small {
  display: block;
  padding: 0.25rem 0.5rem;
}

/* Fix dropdown menu overflow - ensure they don't overflow right edge */
nav details.dropdown {
  position: relative;
}

nav details.dropdown > ul {
  position: absolute;
  right: 0;
  left: auto;
  min-width: 200px;
  max-width: 300px;
  margin: 0;
  z-index: 999;
}

/* Ensure nav items don't cause horizontal scroll */
nav {
  overflow-x: visible;
}

nav ul {
  flex-wrap: nowrap;
}

/* Search button icon alignment */
nav button svg {
  vertical-align: middle;
  margin-top: -2px;
}