/* ══════════════════════════════════════════════════
   Design Tokens — EV Reimbursement App v3.0
   ══════════════════════════════════════════════════ */

:root {
  /* Siemens Brand */
  --siemens-teal: #009999;
  --siemens-teal-light: #00b3b3;
  --siemens-teal-dark: #007a7a;
  --siemens-teal-subtle: #e6f7f7;

  /* Light Theme (default) */
  --bg-color: #f5f6f8;
  --text-color: #1a1a2e;
  --text-secondary: #6b7280;
  --text-muted: #6b7280;
  --container-bg: #ffffff;
  --pre-bg: #f8f9fa;
  --form-bg: #ffffff;
  --form-text: #1a1a2e;
  --border-color: #e5e7eb;
  --border-strong: #d1d5db;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --header-bg: #ffffff;
  --section-hover: #f9fafb;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-2xl: 1.5rem;
  --text-hero: 2.5rem;

  /* Layout */
  --max-width: 640px;
  --header-height: 56px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
}

/* Dark Theme */
body.dark-mode {
  --bg-color: #1a1a2e;
  --text-color: #e8eaed;
  --text-secondary: #9aa0a6;
  --text-muted: #8a9098;
  --container-bg: #16213e;
  --pre-bg: #1a2744;
  --form-bg: #1a2744;
  --form-text: #e8eaed;
  --border-color: #2a3550;
  --border-strong: #374362;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --input-bg: #1a2744;
  --input-border: #2a3550;
  --header-bg: #0f1629;
  --section-hover: #1a2744;
  --siemens-teal-subtle: #0d2b2b;
}