/*
 * tokens.css – AUTOMATISCH GENERIERT von `manage.py build_brand_tokens`.
 * NICHT von Hand bearbeiten. Quelle: brand/nordhort-brand.json.
 */
:root {
  /* --- Markenfarben --- */
  --color-tiefsee: #122C34;
  --color-stahlblau: #224870;
  --color-hortblau: #2A4494;
  --color-lichtblau: #4EA5D9;
  --color-nordlicht: #44CFCB;
  --color-nebel: #EDF2F4;
  --color-schiefer: #3A4A52;
  --color-segel: #FFFFFF;
  /* --- Statusfarben --- */
  --color-amber-web: #E0991F;
  --color-amber-text: #8C5A06;
  --color-hellgrau: #D7DEE2;
  /* --- Semantische Aliase --- */
  --color-text: var(--color-tiefsee);
  --color-text-muted: var(--color-schiefer);
  --color-bg: var(--color-segel);
  --color-bg-alt: var(--color-nebel);
  --color-surface-dark: var(--color-tiefsee);
  --color-primary: var(--color-hortblau);
  --color-primary-hover: var(--color-nordlicht);
  --color-accent: var(--color-lichtblau);
  --color-highlight: var(--color-nordlicht);
  --color-line: var(--color-hellgrau);
  --color-warning: var(--color-amber-web);
  --color-warning-text: var(--color-amber-text);
  /* --- Nordverlauf --- */
  --gradient-from: #2A4494;
  --gradient-to: #44CFCB;
  --gradient-nord: linear-gradient(135deg, #2A4494 0%, #44CFCB 100%);
  /* Text-Variante für Dunkelgrund: startet bei Lichtblau statt
     Hortblau (Hortblau auf Tiefsee unterschreitet 3:1). */
  --gradient-nord-text: linear-gradient(100deg, var(--color-lichtblau) 0%, var(--color-nordlicht) 100%);
  /* --- Abgeleitet: Tinten & Linien auf Dunkelgrund --- */
  --ink-on-dark: var(--color-nebel);
  --ink-on-dark-strong: var(--color-segel);
  --ink-on-dark-muted: color-mix(in srgb, var(--color-nebel) 78%, var(--color-tiefsee));
  --line-on-dark: color-mix(in srgb, var(--color-hellgrau) 24%, transparent);
  /* --- Abgeleitet: Nordlicht-Glows (Lichtquelle) --- */
  --glow-nordlicht-faint: color-mix(in srgb, var(--color-nordlicht) 10%, transparent);
  --glow-nordlicht-soft: color-mix(in srgb, var(--color-nordlicht) 22%, transparent);
  --glow-nordlicht-strong: color-mix(in srgb, var(--color-nordlicht) 40%, transparent);
  /* --- Abgeleitet: Flächen im Dunkel-Kontext --- */
  --surface-raised-dark: color-mix(in srgb, var(--color-stahlblau) 26%, var(--color-tiefsee));
  --tint-lichtblau-dark: color-mix(in srgb, var(--color-lichtblau) 14%, var(--color-tiefsee));
  --tint-nordlicht-dark: color-mix(in srgb, var(--color-nordlicht) 12%, var(--color-tiefsee));
  --tint-amber-dark: color-mix(in srgb, var(--color-amber-web) 14%, var(--color-tiefsee));
  /* --- Abgeleitet: Fläche im Hell-Kontext (Klartext-Callout) --- */
  /* Sehr dezenter Nordlicht-Hauch über Segel – hebt den Block vom
     reinen Weiß ab, ohne dunkle Vollfläche. */
  --surface-klartext: color-mix(in srgb, var(--color-nordlicht) 7%, var(--color-segel));
  /* --- Abgeleitet: Fokus-Ring (Nordlicht) --- */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-nordlicht) 60%, transparent);
  /* --- Schriftfamilien --- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}