/**
 * Design Tokens - Centralized design system variables
 * Provides consistent colors, spacing, typography, and other design tokens
 */

:root {
  /* Color Palette - Primary (Japanese Minimalist) */
  --color-primary: #1A73E8;
  --color-primary-hover: #1557b0;
  --color-primary-light: #5e9cf5;
  --color-primary-dark: #0d47a1;
  --color-primary-rgb: 26, 115, 232;

  /* Color Palette - Secondary */
  --color-secondary: #5f6368;
  --color-secondary-hover: #4a4d51;
  --color-secondary-light: #9aa0a6;
  --color-secondary-dark: #3c4043;

  /* Color Palette - Semantic (Japanese Minimalist) */
  --color-success: #2E7D32;
  --color-success-hover: #1b5e20;
  --color-success-light: #c8e6c9;
  --color-success-rgb: 46, 125, 50;

  --color-info: #0288d1;
  --color-info-hover: #01579b;
  --color-info-light: #b3e5fc;
  --color-info-rgb: 2, 136, 209;

  --color-warning: #FB8C00;
  --color-warning-hover: #e65100;
  --color-warning-light: #ffe0b2;
  --color-warning-rgb: 251, 140, 0;

  --color-danger: #C62828;
  --color-danger-hover: #b71c1c;
  --color-danger-light: #ffcdd2;
  --color-danger-rgb: 198, 40, 40;

  /* Color Palette - Neutral (Japanese Minimalist) */
  --color-light: #F7F7F8;
  --color-dark: #1D1D1F;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Corporate Background Layers - Visual Hierarchy */
  --color-background: #F5F6F7;           /* Page background - softer gray */
  --color-surface: #FFFFFF;              /* Card/component surface */
  --color-surface-secondary: #F8F9FA;   /* Secondary sections */
  --color-surface-tertiary: #F0F1F3;    /* Section headers */
  --color-surface-hover: #FAFBFC;       /* Hover state background */

  /* Corporate Borders - Subtle Separation */
  --color-border: #E3E4E6;              /* Default border color */
  --color-border-light: #EEEFF1;        /* Lighter border */
  --color-border-dark: #D1D3D6;         /* Darker border for emphasis */

  /* Corporate Text Colors - Professional Hierarchy */
  --color-text-primary: #1D1D1F;        /* Main text */
  --color-text-secondary: #6C6F75;      /* Secondary text */
  --color-text-tertiary: #9EA1A7;       /* Tertiary/muted text */
  --color-text-disabled: #C5C7CD;       /* Disabled text */

  /* Color Palette - Grays */
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  
  /* Typography - Google-inspired */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
  --font-family-display: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-monospace: 'SFMono-Regular', 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  
  /* Font Sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing Scale */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-base: 0.375rem; /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;     /* 16px */
  --radius-2xl: 1.5rem;  /* 24px */
  --radius-full: 9999px;
  
  /* Material Design Elevation System (Google-inspired) */
  --shadow-none: none;
  --elevation-0: none;  /* No elevation */
  --elevation-1: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);  /* 1dp - Subtle cards */
  --elevation-2: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);  /* 2dp - Raised cards */
  --elevation-3: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 8px 16px 6px rgba(60, 64, 67, 0.15); /* 3dp - Hover state */
  --elevation-4: 0 2px 4px 0 rgba(60, 64, 67, 0.3), 0 12px 24px 10px rgba(60, 64, 67, 0.15); /* 4dp - Dropdowns */
  --elevation-5: 0 4px 6px 0 rgba(60, 64, 67, 0.3), 0 16px 32px 14px rgba(60, 64, 67, 0.15); /* 5dp - Dialogs */

  /* Legacy shadow variables (mapped to elevation) */
  --shadow-xs: var(--elevation-1);
  --shadow-sm: var(--elevation-1);
  --shadow-base: var(--elevation-2);
  --shadow-md: var(--elevation-3);
  --shadow-lg: var(--elevation-4);
  --shadow-xl: var(--elevation-5);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease;
  
  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  
  /* Layout */
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 70px;
  --navbar-height: 60px;
  --content-max-width: 1200px;
  
  /* Breakpoints (for reference in JS) */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  
  /* Component-specific tokens - Mobile-first */
  --badge-padding-x: 0.5rem;
  --badge-padding-y: 0.25rem;
  --badge-font-size: 0.625rem;  /* 10px */
  --badge-font-weight: 500;

  --button-padding-x: 0.75rem;
  --button-padding-y: 0.375rem;
  --button-font-weight: 500;
  --button-border-radius: var(--radius-base);

  --card-padding: 0.75rem;  /* Reduced for mobile */
  --card-border-radius: var(--radius-md);
  --card-background: var(--color-surface);
  --card-border: 1px solid var(--color-border);
  --card-shadow: var(--shadow-sm);  /* Minimal shadow */
  --card-shadow-hover: var(--shadow-md);  /* Elevated on hover */

  --form-control-padding-x: 0.625rem;
  --form-control-padding-y: 0.375rem;
  --form-control-border-radius: var(--radius-base);

  --table-cell-padding-x: 0.5rem;
  --table-cell-padding-y: 0.375rem;

  /* KPI Card specific tokens */
  --kpi-icon-size: 20px;  /* Mobile-first: 50% smaller */
  --kpi-icon-wrapper-size: 32px;
  --kpi-title-font-size: 0.6875rem;  /* 11px - 30% smaller */
  --kpi-value-font-size: 1.125rem;  /* 18px - 20% smaller */
  --kpi-card-padding: 0.75rem;

  /* Bottom nav for mobile */
  --bottom-nav-height: 56px;
  --bottom-nav-icon-size: 24px;

  /* Icon System - Google-inspired */
  --icon-size-xs: 16px;
  --icon-size-sm: 20px;
  --icon-size-base: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 40px;
  --icon-size-2xl: 48px;
  --icon-size-3xl: 64px;

  /* Icon wrapper sizes (for circular backgrounds) */
  --icon-wrapper-xs: 24px;
  --icon-wrapper-sm: 32px;
  --icon-wrapper-base: 40px;
  --icon-wrapper-lg: 48px;
  --icon-wrapper-xl: 56px;
  --icon-wrapper-2xl: 64px;

  /* Icon colors for different contexts */
  --icon-color-primary: var(--color-primary);
  --icon-color-success: var(--color-success);
  --icon-color-warning: var(--color-warning);
  --icon-color-danger: var(--color-danger);
  --icon-color-info: var(--color-info);
  --icon-color-default: var(--color-text-secondary);
  --icon-color-muted: var(--color-text-tertiary);

  /* Icon background colors (for filled icon containers) */
  --icon-bg-primary: rgba(var(--color-primary-rgb), 0.1);
  --icon-bg-success: rgba(var(--color-success-rgb), 0.1);
  --icon-bg-warning: rgba(var(--color-warning-rgb), 0.1);
  --icon-bg-danger: rgba(var(--color-danger-rgb), 0.1);
  --icon-bg-info: rgba(var(--color-info-rgb), 0.1);
  --icon-bg-default: var(--color-gray-100);
  
  /* Status-specific colors */
  --status-active: var(--color-success);
  --status-pending: var(--color-warning);
  --status-completed: var(--color-primary);
  --status-cancelled: var(--color-danger);
  --status-archived: var(--color-secondary);
  --status-overdue: var(--color-danger);
  --status-in-progress: var(--color-info);
  
  /* Priority colors */
  --priority-low: var(--color-success);
  --priority-medium: var(--color-warning);
  --priority-high: var(--color-danger);
  --priority-urgent: var(--color-danger);

  /* Gradient definitions */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, #34c759 100%);
  --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, #ffca2c 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, #e35d6a 100%);
  --gradient-info: linear-gradient(135deg, var(--color-info) 0%, #3dd5f3 100%);

  /* Accent gradients for modern UI */
  --gradient-purple-blue: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --gradient-ocean: linear-gradient(135deg, #2e3192 0%, #1bffff 100%);
  --gradient-forest: linear-gradient(135deg, #134e5e 0%, #71b280 100%);

  /* Glassmorphism effects */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(0, 0, 0, 0.5);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur: 10px;

  /* Enhanced shadows with color */
  --shadow-primary: 0 4px 15px 0 rgba(var(--color-primary-rgb), 0.15);
  --shadow-success: 0 4px 15px 0 rgba(var(--color-success-rgb), 0.15);
  --shadow-warning: 0 4px 15px 0 rgba(var(--color-warning-rgb), 0.15);
  --shadow-danger: 0 4px 15px 0 rgba(var(--color-danger-rgb), 0.15);
  --shadow-info: 0 4px 15px 0 rgba(var(--color-info-rgb), 0.15);

  /* Overlay colors */
  --overlay-light: rgba(255, 255, 255, 0.95);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);

  /* Interactive State Colors - Google Material */
  --state-hover-opacity: 0.04;
  --state-focus-opacity: 0.12;
  --state-pressed-opacity: 0.16;
  --state-selected-opacity: 0.08;
  --state-disabled-opacity: 0.38;

  /* Ripple effect */
  --ripple-color: rgba(0, 0, 0, 0.1);
  --ripple-duration: 600ms;

  /* Focus ring */
  --focus-ring-color: rgba(var(--color-primary-rgb), 0.5);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Transition timing functions (Google Material Motion) */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);  /* Standard easing */
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); /* Enter screen */
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);   /* Exit screen */
  --ease-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);      /* Quick actions */
}

/* Dark mode tokens (if needed in future) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-light: #212529;
    --color-dark: #f8f9fa;
    --color-gray-100: #212529;
    --color-gray-200: #343a40;
    --color-gray-300: #495057;
    --color-gray-400: #6c757d;
    --color-gray-500: #adb5bd;
    --color-gray-600: #ced4da;
    --color-gray-700: #dee2e6;
    --color-gray-800: #e9ecef;
    --color-gray-900: #f8f9fa;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --color-primary: #0000ff;
    --color-success: #008000;
    --color-warning: #ff8c00;
    --color-danger: #ff0000;
    --shadow-base: 0 0 0 1px currentColor;
    --shadow-md: 0 0 0 2px currentColor;
    --shadow-lg: 0 0 0 3px currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-base: 0s;
    --transition-slow: 0s;
    --transition-slower: 0s;
  }
}

/* Responsive token scaling - Mobile-first approach */
/* Tablet: Scale up slightly from mobile baseline */
@media (min-width: 768px) {
  :root {
    --card-padding: 1rem;
    --kpi-icon-wrapper-size: 40px;
    --kpi-icon-size: 24px;
    --kpi-title-font-size: 0.75rem;  /* 12px */
    --kpi-value-font-size: 1.25rem;  /* 20px */
    --kpi-card-padding: 1rem;
    --badge-font-size: 0.6875rem;  /* 11px */
    --button-padding-x: 0.875rem;
    --button-padding-y: 0.5rem;
  }
}

/* Desktop: Scale to comfortable desktop sizes */
@media (min-width: 992px) {
  :root {
    --card-padding: 1.25rem;
    --kpi-icon-wrapper-size: 48px;
    --kpi-icon-size: 28px;
    --kpi-title-font-size: 0.8125rem;  /* 13px */
    --kpi-value-font-size: 1.5rem;  /* 24px */
    --kpi-card-padding: 1.25rem;
    --badge-font-size: 0.75rem;  /* 12px */
    --button-padding-x: 1rem;
    --button-padding-y: 0.5rem;
  }
}