/**
 * WorkAndHire Design System — CSS tokens
 * Authoritative source: Design/DESIGN.md §2
 * Load before legacy style.css / bundle.css and application stylesheets.
 */
:root {
  /* Brand */
  --color-primary: #8c0605;
  --color-primary-hover: #6e0504;
  --color-primary-active: #560403;
  --color-primary-light: #fae6e7;
  --color-accent: #24b7e5;

  /* Semantic */
  --color-success: #00b22d;
  --color-success-bg: #e9f9ee;
  --color-error: #d32f2f;
  --color-error-bg: #fdecea;
  --color-warning: #e6a700;
  --color-warning-bg: #fff8e1;
  --color-info: #337ab7;
  --color-info-bg: #eaf3fa;

  /* Neutrals */
  --color-text: #333333;
  --color-text-muted: #6c6c6c;
  --color-border: #d0d0d0;
  --color-bg: #ffffff;
  --color-bg-subtle: #f3f3f3;

  /* Typography */
  --font-base: 'Inter', 'Open Sans', 'Roboto', Arial, Helvetica, sans-serif;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --line-height-tight: 1.3;
  --line-height-base: 1.45;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius & shadow */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-full: 100%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 1px 4px rgba(0, 0, 0, 0.15);
  --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* Breakpoints (reference values) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1280px;

  /* Motion */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* Back-compat aliases used by modern views (style.css) */
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-hover);
  --secondary: var(--color-accent);
  --success: var(--color-success);
  --danger: var(--color-error);
  --warning: var(--color-warning);
  --dark: #1f2d3d;
  --gray: var(--color-text-muted);
  --light-gray: var(--color-bg-subtle);
  --white: var(--color-bg);
  --border: var(--color-border);
  --shadow: var(--shadow-sm);
  --shadow-lg: var(--shadow-md);
  --radius: var(--radius-md);
  --radius-lg-token: var(--radius-lg);

  /* skillandhire.css aliases */
  --wah-green: var(--color-primary);
  --wah-green-dark: var(--color-primary-hover);
  --wah-green-lt: var(--color-primary-light);
  --wah-blue: var(--color-accent);
  --wah-navy: var(--dark);
  --wah-ink: var(--color-text);
  --wah-muted: var(--color-text-muted);
  --wah-line: var(--color-border);
  --wah-bg: var(--color-bg-subtle);
  --wah-white: var(--color-bg);
  --wah-font: var(--font-base);
  --wah-head: var(--font-base);

  /* enterprise-ux aliases */
  --emux-primary: var(--color-primary);
  --emux-bg: var(--color-bg-subtle);
  --emux-card: var(--color-bg);
  --emux-border: var(--color-border);

  /* Layout */
  --container-max: 1280px;
}

/* Dark mode ready */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e5e7eb;
    --color-text-muted: #9ca3af;
    --color-border: #374151;
    --color-bg: #111827;
    --color-bg-subtle: #1f2937;
    --color-primary-light: rgba(140, 6, 5, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --bg-overlay: rgba(0, 0, 0, 0.65);
  }
}

[data-theme="dark"] {
  --color-text: #e5e7eb;
  --color-text-muted: #9ca3af;
  --color-border: #374151;
  --color-bg: #111827;
  --color-bg-subtle: #1f2937;
  --color-primary-light: rgba(140, 6, 5, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --bg-overlay: rgba(0, 0, 0, 0.65);
}