/**
 * Design Tokens - Henson Engineering Timesheet PWA
 * Light and Dark theme variables with consistent spacing, typography, and colors.
 */

/* ============================================================================
   Base Tokens (theme-agnostic)
   ============================================================================ */

:root {
  /* Typography Scale (using clamp for responsive sizing) */
  --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);     /* 12-13px */
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 0.9375rem);    /* 14-15px */
  --text-base: clamp(1rem, 0.925rem + 0.4vw, 1.0625rem);     /* 16-17px */
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);         /* 18-20px */
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);        /* 20-24px */
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);         /* 24-30px */
  --text-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.25rem);      /* 30-36px */
  
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  
  /* 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 */
  
  /* Border Radius */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.25rem;   /* 20px */
  --radius-full: 9999px;
  
  /* Touch Target Sizing */
  --touch-target-min: 44px;
  --btn-height: 52px;
  --btn-height-lg: 60px;
  --input-height: 52px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* Z-Index Scale */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
  
  /* Safe Areas (for notched devices) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  
  /* Content Width */
  --content-max-width: 480px;
  --content-padding: var(--space-5);
}

/* ============================================================================
   Light Theme
   ============================================================================ */

:root,
:root[data-theme="light"] {
  /* Backgrounds */
  --bg-app: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-surface-sunken: #f1f5f9;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Text */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  
  /* Borders */
  --border-default: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-strong: #cbd5e1;
  
  /* Brand Colors */
  --brand-gold: #d97706;
  --brand-gold-bg: #fef3c7;
  
  /* Semantic Colors */
  --color-primary: #0369a1;
  --color-primary-hover: #0284c7;
  --color-primary-bg: #e0f2fe;
  
  --color-success: #15803d;
  --color-success-hover: #16a34a;
  --color-success-bg: #dcfce7;
  
  --color-danger: #dc2626;
  --color-danger-hover: #ef4444;
  --color-danger-bg: #fee2e2;
  
  --color-warning: #ca8a04;
  --color-warning-bg: #fef9c3;
  
  --color-info: #0891b2;
  --color-info-bg: #cffafe;
  
  /* Interactive States */
  --focus-ring: 0 0 0 3px rgba(3, 105, 161, 0.35);
  --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.35);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  
  /* Input specific */
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-border-focus: var(--color-primary);
  --input-placeholder: #94a3b8;
  
  /* Status bar */
  --status-bar-bg: #ffffff;
  --status-bar-border: var(--border-default);
  
  /* Theme color for PWA */
  --theme-color: #ffffff;
}

/* ============================================================================
   Dark Theme
   ============================================================================ */

:root[data-theme="dark"] {
  /* Backgrounds */
  --bg-app: #0f172a;
  --bg-surface: #1e293b;
  --bg-surface-raised: #334155;
  --bg-surface-sunken: #0f172a;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  
  /* Text */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --text-inverse: #0f172a;
  
  /* Borders */
  --border-default: #334155;
  --border-subtle: #1e293b;
  --border-strong: #475569;
  
  /* Brand Colors */
  --brand-gold: #fbbf24;
  --brand-gold-bg: rgba(251, 191, 36, 0.15);
  
  /* Semantic Colors */
  --color-primary: #38bdf8;
  --color-primary-hover: #7dd3fc;
  --color-primary-bg: rgba(56, 189, 248, 0.15);
  
  --color-success: #4ade80;
  --color-success-hover: #86efac;
  --color-success-bg: rgba(74, 222, 128, 0.15);
  
  --color-danger: #f87171;
  --color-danger-hover: #fca5a5;
  --color-danger-bg: rgba(248, 113, 113, 0.15);
  
  --color-warning: #facc15;
  --color-warning-bg: rgba(250, 204, 21, 0.15);
  
  --color-info: #22d3ee;
  --color-info-bg: rgba(34, 211, 238, 0.15);
  
  /* Interactive States */
  --focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.4);
  --focus-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.4);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  
  /* Input specific */
  --input-bg: #1e293b;
  --input-border: #475569;
  --input-border-focus: var(--color-primary);
  --input-placeholder: #64748b;
  
  /* Status bar */
  --status-bar-bg: #1e293b;
  --status-bar-border: var(--border-default);
  
  /* Theme color for PWA */
  --theme-color: #0f172a;
}

/* ============================================================================
   System Preference Detection (when no explicit theme is set)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Backgrounds */
    --bg-app: #0f172a;
    --bg-surface: #1e293b;
    --bg-surface-raised: #334155;
    --bg-surface-sunken: #0f172a;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    
    /* Text */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --text-inverse: #0f172a;
    
    /* Borders */
    --border-default: #334155;
    --border-subtle: #1e293b;
    --border-strong: #475569;
    
    /* Brand Colors */
    --brand-gold: #fbbf24;
    --brand-gold-bg: rgba(251, 191, 36, 0.15);
    
    /* Semantic Colors */
    --color-primary: #38bdf8;
    --color-primary-hover: #7dd3fc;
    --color-primary-bg: rgba(56, 189, 248, 0.15);
    
    --color-success: #4ade80;
    --color-success-hover: #86efac;
    --color-success-bg: rgba(74, 222, 128, 0.15);
    
    --color-danger: #f87171;
    --color-danger-hover: #fca5a5;
    --color-danger-bg: rgba(248, 113, 113, 0.15);
    
    --color-warning: #facc15;
    --color-warning-bg: rgba(250, 204, 21, 0.15);
    
    --color-info: #22d3ee;
    --color-info-bg: rgba(34, 211, 238, 0.15);
    
    /* Interactive States */
    --focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.4);
    --focus-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.4);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    
    /* Input specific */
    --input-bg: #1e293b;
    --input-border: #475569;
    --input-border-focus: var(--color-primary);
    --input-placeholder: #64748b;
    
    /* Status bar */
    --status-bar-bg: #1e293b;
    --status-bar-border: var(--border-default);
    
    /* Theme color for PWA */
    --theme-color: #0f172a;
  }
}