/* Voice Recruiting Agent — Design Tokens
 * Extracted from Christopher's "The Human Algorithm V3" Design System
 * Source: web/mockups/DESIGN_CONCEPT.md
 *
 * Usage: <link rel="stylesheet" href="/shared/design-tokens.css">
 * All pages share these variables for consistent theming.
 *
 * DSGVO: Fonts are self-hosted to avoid IP transfer to Google (LG München, 2022).
 */

/* === Self-Hosted Fonts (DSGVO-compliant) === */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/shared/fonts/inter-v18-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonts/noto-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/shared/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* === Light Surfaces === */
  --surface: #FAFAF8;
  --surface-dim: #F2F0ED;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #F5F3F0;
  --surface-container: #EFECEA;
  --surface-container-high: #E8E5E2;
  --surface-container-highest: #E0DDDA;
  --surface-variant: #D8D4D0;

  /* === Primary Accent (Brüggen Light Red, per official brand guidelines) === */
  --primary: #ff4143;
  --primary-light: #ff6b6b;
  --primary-container: #ffe5e6;
  --on-primary: #FFFFFF;
  --on-primary-container: #661c31;

  /* === Text === */
  --on-surface: #1A1816;
  --on-surface-variant: #5C5650;
  --outline: #8A837C;
  --outline-variant: #D3CFC9;
  --secondary: #6B6560;

  /* === Semantic === */
  --success: #16a34a;
  --warning: #D97706;
  --error: #BA1A1A;
  --info: #2563eb;

  /* === Dark Sections === */
  --dark-section: #1A1816;
  --dark-section-light: #262320;
  --inverse-on-surface: #F5F3F0;

  /* === White-Label (override per tenant) === */
  --brand-primary: var(--primary);
  --brand-primary-light: var(--primary-light);
  --brand-surface: var(--surface);

  /* === Typography === */
  --font-display: 'Noto Serif', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* === Spacing === */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;

  /* === Transitions === */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Dark Mode Override === */
[data-theme="dark"] {
  --surface: #1A1816;
  --surface-dim: #141210;
  --surface-container-lowest: #0F0E0C;
  --surface-container-low: #1E1C1A;
  --surface-container: #242220;
  --surface-container-high: #2E2C2A;
  --surface-container-highest: #393735;
  --surface-variant: #454340;

  --primary: #ff6b6b;
  --primary-light: #ff9999;
  --primary-container: #4a1216;
  --on-primary: #1A1816;
  --on-primary-container: #ffe5e6;

  --on-surface: #E8E5E2;
  --on-surface-variant: #A09A94;
  --outline: #6B6560;
  --outline-variant: #3D3A37;
  --secondary: #A09A94;

  --dark-section: #0F0E0C;
  --dark-section-light: #1A1816;
  --inverse-on-surface: #1A1816;
}