/* ==========================================================================
   Design Tokens — mapped from Figma variables
   ========================================================================== */

@font-face {
  font-family: 'Soehne';
  src: url('../assets/fonts/soehne-buch.woff2') format('woff2'),
       url('../assets/fonts/soehne-buch.woff') format('woff'),
       url('../assets/fonts/soehne-buch.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Soehne';
  src: url('../assets/fonts/soehne-halbfett.woff2') format('woff2'),
       url('../assets/fonts/soehne-halbfett.woff') format('woff'),
       url('../assets/fonts/soehne-halbfett.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Dark theme (default) --- */
:root {
  /* Viewport */
  --visual-vh: 100dvh;

  /* Colors */
  --color-bg: #111111;
  --color-surface: #1a1a1a;
  --color-card-border: #2a2a2a;
  --color-card-hover: #3a3a3a;
  --color-text-primary: #ededed;
  --color-text-secondary: #a1a1a1;
  --color-accent: #f0096d;
  --color-accent-hover: #bf1961;
  --color-pagination-bg: rgba(47, 47, 47, 0.8);
  --color-icon-default: #a1a1a1;
  --color-icon-strong: #ededed;

  /* Typography */
  --font-family: 'Soehne', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-bold: 'Soehne', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --text-xxl: clamp(32px, 4vw, 48px);
  --leading-xxl: 1.5;
  --tracking-xxl: 0.025em;

  --text-xl: clamp(28px, 3vw, 36px);
  --leading-xl: 1.44;
  --tracking-xl: 0.025em;

  --text-l: clamp(20px, 2vw, 24px);
  --leading-l: 1.67;
  --tracking-l: 0.02em;

  --text-subline: clamp(22px, 2.5vw, 28px);
  --leading-subline: 1.43;
  --tracking-subline: 0.02em;

  --text-body: clamp(16px, 1.5vw, 18px);
  --leading-body: 1.56;
  --tracking-body: 0.02em;

  --text-label: 16px;
  --leading-label: 1;
  --tracking-label: 0.02em;

  --text-nav: 18px;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 80px;

  /* Layout */
  --content-max-width: 1200px;
  --page-padding: clamp(20px, 5vw, 120px);
  --nav-padding: clamp(16px, 3vw, 40px);
  --nav-outer-padding: clamp(24px, 4.5vw, 64px);
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 32px;
  --border-radius-pill: 56px;
  --border-radius-chatbot: 48px;

  /* Chat-specific */
  --color-accent-transparent: rgba(240, 9, 109, 0.1);
  --color-accent-border: #bf1961;
}

/* --- Light theme --- */
[data-theme="light"] {
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-card-border: #e5e7eb;
  --color-card-hover: #d1d5db;
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-accent: #f0096d;
  --color-accent-hover: #bf1961;
  --color-pagination-bg: rgba(243, 244, 246, 0.8);
  --color-icon-default: #4b5563;
  --color-icon-strong: #111827;
  --color-accent-transparent: rgba(240, 9, 109, 0.1);
  --color-accent-border: #d4247a;
}

/* --- Mobile overrides --- */
@media (max-width: 768px) {
  :root {
    --space-lg: 32px;
    --space-xl: 48px;
    --page-padding: clamp(16px, 4vw, 40px);
  }
}