/* ───────────────────────────────────────────────────────────────
   swissAI Design System – Foundations
   Typography & Color Tokens
   ───────────────────────────────────────────────────────────────
   Loading Inter from Google Fonts (Regular 400, SemiBold 600, Bold 700).
   Figma file specifies "Inter Semi Bold" for headlines – we map that
   to weight 600. Body uses Regular (400).
   ─────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ───── Brand Colors (Primary) ───── */
  --sa-red:              #EB0000;   /* Primärrot   – Brand */
  --sa-lavender:         #B70FFF;   /* Primärviolett "Lavender" – Brand */
  --sa-gradient:         linear-gradient(90deg, #EB0000 0%, #B70FFF 100%);
  --sa-gradient-diag:    linear-gradient(135deg, #EB0000 0%, #B70FFF 100%);

  /* ───── Secondary (Brand variants) ───── */
  --sa-red-light:        #FF4D4D;
  --sa-red-dark:         #990000;
  --sa-red-hover:        #CC0000;
  --sa-lavender-light:   #D580FF;
  --sa-lavender-dark:    #6A0099;
  --sa-lavender-hover:   #9E00E6;

  /* ───── Neutrals / Backgrounds ───── */
  --sa-bg:               #F9F9FB;   /* Default light background */
  --sa-bg-alt:           #FFFFFF;
  --sa-surface:          #FFFFFF;
  --sa-surface-muted:    #F5F5F5;  /* Figma uses this as showcase bg */
  --sa-gray-100:         #F2F2F2;
  --sa-gray-200:         #EDEDED;
  --sa-gray-300:         #E0E0E0;
  --sa-gray-400:         #C4C4C4;
  --sa-gray-500:         #9E9E9E;
  --sa-gray-600:         #8C8C8C;
  --sa-gray-700:         #4A4A4A;
  --sa-gray-800:         #2B2B2B;
  --sa-gray-900:         #1A1A1A;
  --sa-black:            #000000;
  --sa-white:            #FFFFFF;
  --sa-bg-dark:          #121212;   /* Dark mode background */

  /* ───── Text ───── */
  --sa-text:             #1A1A1A;
  --sa-text-muted:       #4A4A4A;
  --sa-text-subtle:      #8C8C8C;
  --sa-text-invert:      #FFFFFF;

  /* ───── Semantic / Signal ───── */
  --sa-success:          #28A745;
  --sa-warning:          #FFC107;
  --sa-error:            #DC3545;
  --sa-info:             #17A2B8;

  /* ───── Borders ───── */
  --sa-border:           #E0E0E0;
  --sa-border-strong:    #C4C4C4;
  --sa-border-dark:      #4A4A4A;
  --sa-border-disabled:  #DADADA;
  --sa-border-focus:     #B70FFF;

  /* ───── Extended palette ───── */
  --sa-brown-light:  #D7CCC8;  --sa-brown:  #795548;  --sa-brown-dark:  #4E342E;
  --sa-orange-light: #FFCC80;  --sa-orange: #FB8C00;  --sa-orange-dark: #E65100;
  --sa-yellow-light: #FFF59D;  --sa-yellow: #FBC02D;  --sa-yellow-dark: #F57F17;
  --sa-green-light:  #A5D6A7;  --sa-green:  #43A047;  --sa-green-dark:  #1B5E20;
  --sa-blue-light:   #90CAF9;  --sa-blue:   #1E88E5;  --sa-blue-dark:   #0D47A1;
  --sa-purple-light: #CE93D8;  --sa-purple: #8E24AA;  --sa-purple-dark: #4A148C;
  --sa-pink-light:   #F48FB1;  --sa-pink:   #D81B60;  --sa-pink-dark:   #880E4F;

  /* ───── Typography: families ───── */
  --sa-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --sa-font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ───── Typography: weights ───── */
  --sa-fw-regular:  400;
  --sa-fw-medium:   500;
  --sa-fw-semibold: 600;  /* Headlines per Figma (Inter Semi Bold) */
  --sa-fw-bold:     700;

  /* ───── Typography: scale ───── */
  /* Based on Figma specimen (80px display, 50px body-ish large) plus a harmonic 1.25 ratio for UI. */
  --sa-text-xs:   12px;
  --sa-text-sm:   14px;
  --sa-text-base: 16px;
  --sa-text-md:   18px;
  --sa-text-lg:   20px;
  --sa-text-xl:   24px;
  --sa-text-2xl:  32px;
  --sa-text-3xl:  40px;
  --sa-text-4xl:  50px;   /* Figma "Rot #EB0000 / Lavender" label size */
  --sa-text-5xl:  64px;
  --sa-text-6xl:  80px;   /* Figma display size */

  /* ───── Line heights ───── */
  --sa-lh-tight:   1.0;   /* 100% – used for Figma display specimens */
  --sa-lh-snug:    1.15;
  --sa-lh-normal:  1.4;
  --sa-lh-relaxed: 1.6;

  /* ───── Spacing (4 px base) ───── */
  --sa-space-0:  0px;
  --sa-space-1:  4px;
  --sa-space-2:  8px;
  --sa-space-3:  12px;
  --sa-space-4:  16px;
  --sa-space-5:  24px;
  --sa-space-6:  32px;
  --sa-space-7:  48px;
  --sa-space-8:  64px;
  --sa-space-9:  96px;
  --sa-space-10: 128px;

  /* ───── Radii ───── */
  --sa-radius-xs:   2px;
  --sa-radius-sm:   4px;
  --sa-radius-md:   8px;
  --sa-radius-lg:   12px;
  --sa-radius-xl:   20px;
  --sa-radius-pill: 999px;

  /* ───── Elevation ───── */
  --sa-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
  --sa-shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.06);
  --sa-shadow-md:    0 6px 20px rgba(0, 0, 0, 0.08);
  --sa-shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.10);
  --sa-shadow-brand: 0 12px 32px rgba(183, 15, 255, 0.20);
  --sa-shadow-focus: 0 0 0 3px rgba(183, 15, 255, 0.30);

  /* ───── Motion ───── */
  --sa-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --sa-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --sa-dur-fast:   120ms;
  --sa-dur-base:   200ms;
  --sa-dur-slow:   400ms;

  /* ───── Minimum logo clearspace ─────
     Per Figma: Bildmarke min. Abstand = 34/120 ≈ 28% of mark size.
     Wortmarke clearspace ≈ 32/120 ≈ 27% on all sides. */
  --sa-logo-clearspace-ratio: 0.28;
}

/* ────────────────────────────────
   Semantic element mapping
   Use these as ready-to-go defaults.
   ──────────────────────────────── */

html, body {
  font-family: var(--sa-font-sans);
  color: var(--sa-text);
  background: var(--sa-bg);
  font-size: var(--sa-text-base);
  line-height: var(--sa-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .sa-h1 {
  font-family: var(--sa-font-sans);
  font-weight: var(--sa-fw-semibold);
  font-size: var(--sa-text-5xl);
  line-height: var(--sa-lh-tight);
  letter-spacing: -0.02em;
  color: var(--sa-text);
  margin: 0;
}
h2, .sa-h2 {
  font-family: var(--sa-font-sans);
  font-weight: var(--sa-fw-semibold);
  font-size: var(--sa-text-3xl);
  line-height: var(--sa-lh-snug);
  letter-spacing: -0.015em;
  color: var(--sa-text);
  margin: 0;
}
h3, .sa-h3 {
  font-family: var(--sa-font-sans);
  font-weight: var(--sa-fw-semibold);
  font-size: var(--sa-text-xl);
  line-height: var(--sa-lh-snug);
  letter-spacing: -0.01em;
  color: var(--sa-text);
  margin: 0;
}
h4, .sa-h4 {
  font-family: var(--sa-font-sans);
  font-weight: var(--sa-fw-semibold);
  font-size: var(--sa-text-md);
  line-height: var(--sa-lh-snug);
  color: var(--sa-text);
  margin: 0;
}
p, .sa-p {
  font-family: var(--sa-font-sans);
  font-weight: var(--sa-fw-regular);
  font-size: var(--sa-text-base);
  line-height: var(--sa-lh-relaxed);
  color: var(--sa-text);
  margin: 0;
}
small, .sa-small {
  font-size: var(--sa-text-sm);
  color: var(--sa-text-muted);
}
.sa-eyebrow {
  font-size: var(--sa-text-xs);
  font-weight: var(--sa-fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sa-text-muted);
}
code, .sa-code {
  font-family: var(--sa-font-mono);
  font-size: 0.92em;
  background: var(--sa-gray-100);
  padding: 0.1em 0.4em;
  border-radius: var(--sa-radius-xs);
}

/* ────────────────────────────────
   Brand helpers
   ──────────────────────────────── */
.sa-gradient-text {
  background: var(--sa-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sa-gradient-bg    { background: var(--sa-gradient); }
.sa-gradient-border{
  border: 2px solid transparent;
  background:
    linear-gradient(var(--sa-surface), var(--sa-surface)) padding-box,
    var(--sa-gradient) border-box;
}

/* ────────────────────────────────
   Print: Hintergründe & Farben erzwingen (Chrome --print-to-pdf)
   ──────────────────────────────── */
@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

/* ────────────────────────────────
   Print: Gradient-Text-Bug umgehen
   Chrome --print-to-pdf rendert background-clip: text + color: transparent
   bei aktivem print-color-adjust als opaken Block. Fallback auf solid color.
   ──────────────────────────────── */
@media print {
  .sa-gradient-text,
  [class*="gradient-text"] {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--sa-lavender) !important;
  }
}

/* ────────────────────────────────
   Dark Mode Overrides
   Triggered by html.dark (set via theme.js)
   Brand colors (red, lavender, gradients) never change.
   ──────────────────────────────── */
html.dark {
  color-scheme: dark;

  --sa-bg:            #111827;
  --sa-bg-alt:        #1a2033;
  --sa-surface:       #1e2235;
  --sa-surface-muted: #252b40;
  --sa-gray-100:      #1e1e2e;
  --sa-gray-200:      #252538;
  --sa-gray-300:      #2e2e48;
  --sa-gray-400:      #44446a;
  --sa-gray-500:      #6a6a9a;
  --sa-gray-600:      #8888b8;

  --sa-text:          #f0f0f8;
  --sa-text-muted:    #a0a0c8;
  --sa-text-subtle:   #6a6a9a;

  --sa-border:        #2a2a42;
  --sa-border-strong: #3a3a5a;

  --sa-shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --sa-shadow-sm:  0 2px 6px rgba(0,0,0,0.35);
  --sa-shadow-md:  0 6px 20px rgba(0,0,0,0.4);
  --sa-shadow-lg:  0 16px 40px rgba(0,0,0,0.5);
}

/* Smooth transitions on theme change — colors only, not layout */
html.theme-ready * {
  transition:
    background-color 200ms var(--sa-ease-standard),
    border-color 200ms var(--sa-ease-standard),
    color 200ms var(--sa-ease-standard),
    box-shadow 200ms var(--sa-ease-standard);
}