/*
 * HuntingThreats Design Tokens (HT-DS1)
 *
 * This file is the canonical source for shared visual values. Feature styles
 * may consume these tokens, but must not redefine their semantic meaning.
 */

:root {
  color-scheme: dark;

  /* Surfaces */
  --ht-bg-page: #07111f;
  --ht-bg-surface: #0f1d31;
  --ht-bg-surface-soft: #13223a;
  --ht-bg-elevated: #162742;

  /* Text */
  --ht-text-primary: #f4f7fb;
  --ht-text-secondary: #b8c4d6;
  --ht-text-muted: #8fa1b9;
  --ht-text-disabled: #667892;

  /* Borders */
  --ht-border: #263b58;
  --ht-border-soft: rgba(101, 132, 173, 0.22);
  --ht-border-strong: rgba(95, 125, 255, 0.38);

  /* Brand and contextual accents */
  --ht-primary: #2f6bff;
  --ht-primary-hover: #4d82ff;
  --ht-primary-soft: rgba(47, 107, 255, 0.14);
  /* Primary als Text: --ht-primary erreicht auf --ht-bg-page nur 3.9:1
     und faellt damit unter AA. Text, Links und Akzentschrift nehmen
     deshalb den helleren Ton derselben Skala (gemessen 5.7:1).
     Flaechen, Rahmen und Fuellungen behalten --ht-primary. */
  --ht-primary-text: var(--ht-primary-hover);
  --ht-accent-cyan: #16c8f5;
  --ht-accent-cyan-soft: rgba(22, 200, 245, 0.12);
  --ht-ai-accent: #7c4dff;
  --ht-ai-accent-hover: #9b6cff;
  --ht-ai-accent-soft: rgba(124, 77, 255, 0.14);

  /* Status */
  --ht-success: #24c78e;
  --ht-success-soft: rgba(36, 199, 142, 0.14);
  --ht-warning: #f3b63f;
  --ht-warning-soft: rgba(243, 182, 63, 0.14);
  --ht-danger: #ff4d6d;
  --ht-danger-soft: rgba(255, 77, 109, 0.14);
  --ht-info: #4f83ff;
  --ht-info-soft: rgba(79, 131, 255, 0.14);

  /* Typography */
  --ht-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ht-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ht-font-xs: 0.75rem;
  --ht-font-sm: 0.875rem;
  --ht-font-md: 1rem;
  --ht-font-lg: 1.125rem;
  --ht-font-xl: 1.5rem;
  --ht-font-2xl: 2rem;
  --ht-font-3xl: 2.5rem;
  --ht-font-weight-normal: 400;
  --ht-font-weight-medium: 500;
  --ht-font-weight-semibold: 600;
  --ht-font-weight-bold: 700;
  /* 800 ist im Cockpit gaengig (155 gerenderte Elemente, vor allem
     versale Labels). Der Token macht aus dem Literal eine Stufe;
     eine Reduktion auf 700 waere eine Designentscheidung, keine Hygiene. */
  --ht-font-weight-heavy: 800;

  /* Typo-Rollen — die eigentliche Schnittstelle des Themes.
     Die Stufen oben sind der Rohvorrat; konsumiert wird ueber Rollen,
     damit gleiche Rollen seitenuebergreifend gleich gross sind.
     Die Werte stammen aus der Messung von 1207 Textelementen: sie bilden
     die vorhandenen Cluster ab, statt eine fremde Skala zu erzwingen.
     Vorher lagen 1003 Elemente auf 19 Groessen zwischen 9 und 14.7px. */
  --ht-type-micro:      0.5625rem;            /*  9px  Achsen, Mikro-Labels */
  --ht-type-meta:       0.6875rem;            /* 11px  Badges, Tabellenkoepfe */
  --ht-type-caption:    var(--ht-font-xs);    /* 12px  Zeitstempel, Quellen */
  --ht-type-body-sm:    0.8125rem;            /* 13px  dichter Text, Tabellen */
  --ht-type-body:       var(--ht-font-sm);    /* 14px  Fliesstext */
  --ht-type-body-lg:    var(--ht-font-md);    /* 16px  Lead, Hervorhebung */
  --ht-type-title:      var(--ht-font-lg);    /* 18px  Card- und Panel-Titel */
  --ht-type-section:    1.375rem;             /* 22px  Sektionsueberschrift */
  /* KPI-Zahlen wachsen mit: bei 390px lief eine vierstellige Zahl aus
     der schmalen Kachel heraus (gemessen 74px Inhalt in 47px Kasten).
     22px auf Mobil, 28px ab 1440. */
  --ht-type-metric:     clamp(1.375rem, 1.236rem + 0.571vw, 1.75rem);
  --ht-type-page-title: clamp(2rem, 1.6rem + 1.1vw, 2.75rem);

  /* Spacing
     Grundraster ist 4px. Das Cockpit nutzt nachweislich zusaetzlich die
     Halbstufen: gemessen ueber 791 Deklarationen kommt 10px 71x vor,
     18px 70x, 14px 58x, 6px 40x. Sie zu streichen waere ein Redesign,
     kein Aufraeumen — deshalb sind sie hier benannt statt verboten.
     Ungerade Werte (5/7/9/11/13/15/17/19) und die Bruchwerte aus der
     alten rem-Schicht sind dagegen Drift und auf die Nachbarstufe
     zusammengefuehrt. */
  --ht-space-05: 2px;
  --ht-space-1: 4px;
  --ht-space-15: 6px;   /* Halbstufe */
  --ht-space-2: 8px;
  --ht-space-25: 10px;  /* Halbstufe */
  --ht-space-3: 12px;
  --ht-space-35: 14px;  /* Halbstufe */
  --ht-space-4: 16px;
  --ht-space-45: 18px;  /* Halbstufe */
  --ht-space-5: 20px;
  --ht-space-55: 22px;  /* Halbstufe */
  --ht-space-6: 24px;
  --ht-space-7: 28px;
  --ht-space-8: 32px;
  --ht-space-10: 40px;
  --ht-space-12: 48px;

  /* Rhythmus-Rollen. Gemessen vor HT-DS3.4: Karten derselben Rolle trugen
     0/14/16/18px Polsterung, Kartenraster 10/12/14/16/18px Abstand.
     Die Rollen legen fest, was gemeint ist — die Stufe folgt daraus. */
  --ht-pad-card: var(--ht-space-4);         /* 16px Karteninneres */
  --ht-pad-card-dense: var(--ht-space-35);  /* 14px KPI-Kacheln, Tiles */
  --ht-gap-grid: var(--ht-space-45);        /* 18px Karte zu Karte */
  --ht-gap-inline: var(--ht-space-15);      /* 6px  Icon zu Text */
  --ht-gap-control: var(--ht-space-2);      /* 8px  Bedienelemente */

  /* Zeilenhoehen nach Rolle. Vorher: 19 Werte auf 73 Deklarationen. */
  --ht-leading-tight: 1;      /* Zahlen, Badges, Icon-Zeilen */
  --ht-leading-heading: 1.2;  /* Ueberschriften */
  --ht-leading-snug: 1.4;     /* dichte Listen, Tabellen, Meta */
  --ht-leading-normal: 1.5;   /* Fliesstext */
  --ht-leading-relaxed: 1.65; /* lange Absaetze, Lead */

  /* Icon-Groessen. Icons sind ein eigener Komponentenbereich: font-size
     steuert hier die Glyphe, nicht die Typografie. Vorher: 288 Elemente
     in 18 Groessen. */
  --ht-icon-xs: 12px;   /* in Badges und Meta-Zeilen */
  --ht-icon-sm: 14px;   /* inline neben Text */
  --ht-icon-md: 16px;   /* Bedienelemente, Navigation */
  --ht-icon-lg: 18px;   /* Card-Kopf */
  --ht-icon-xl: 22px;   /* KPI- und Sektionsymbole */
  --ht-icon-2xl: 26px;  /* Hero- und CTA-Symbole */
  --ht-icon-3xl: 40px;  /* Platzhaltergrafik in Karten ohne Bild */

  /* Shape and depth */
  --ht-radius-sm: 8px;
  --ht-radius-md: 12px;
  --ht-radius-lg: 16px;
  --ht-radius-xl: 20px;
  --ht-radius-pill: 999px;
  --ht-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.12);
  --ht-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.16);
  --ht-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.22);
  --ht-focus-ring: 0 0 0 3px rgba(47, 107, 255, 0.30);

  /* Basic stacking order */
  --ht-z-base: 1;
  --ht-z-sticky: 100;
  --ht-z-dropdown: 300;
  --ht-z-overlay: 800;
  --ht-z-modal: 1000;
  --ht-z-toast: 1100;

  /* Legacy bridge: only aliases currently consumed by the theme. */
  --bg-primary: var(--ht-bg-page);
  --bg-secondary: var(--ht-bg-surface-soft);
  --bg-card: var(--ht-bg-surface);
  --bg-card-hover: var(--ht-bg-elevated);
  --bg-elevated: var(--ht-bg-elevated);
  --text-primary: var(--ht-text-primary);
  --text-secondary: var(--ht-text-secondary);
  --text-muted: var(--ht-text-muted);
  --border: var(--ht-border-soft);
  --border-neutral: var(--ht-border-soft);
  --border-strong: var(--ht-border-strong);
  --accent: var(--ht-primary);
  --accent-soft: var(--ht-primary-hover);
  --accent-deep: var(--ht-primary);
  --accent-glow: var(--ht-primary-soft);
  --accent-cyan: var(--ht-accent-cyan);
  --accent-green: var(--ht-success);
  --accent-red: var(--ht-danger);
  --accent-orange: var(--ht-warning);
  --critical: var(--ht-danger);
  --high: var(--ht-warning);
  --medium: var(--ht-warning);
  --low: var(--ht-success);
  --info: var(--ht-info);
  --purple: var(--ht-ai-accent);
  --r-sm: var(--ht-radius-sm);
  --r-md: var(--ht-radius-md);
  --r-lg: var(--ht-radius-lg);
  --r-xl: var(--ht-radius-xl);
  --r-pill: var(--ht-radius-pill);
  --shadow-card: var(--ht-shadow-md);
  --shadow-glow: var(--ht-shadow-sm);

  /* Embedded Trainer bridge. These resolve before the app's local variables. */
  --trainer-bg: var(--ht-bg-page);
  --trainer-card: var(--ht-bg-surface);
  --trainer-card-soft: var(--ht-bg-surface-soft);
  --trainer-elevated: var(--ht-bg-elevated);
  --trainer-text: var(--ht-text-primary);
  --trainer-text-secondary: var(--ht-text-secondary);
  --trainer-muted: var(--ht-text-muted);
  --trainer-border: var(--ht-border-soft);
  --trainer-border-strong: var(--ht-border-strong);
  --trainer-primary: var(--ht-primary);
  --trainer-ai: var(--ht-ai-accent);
}

/* Semantic light-mode preparation. Page-level migration follows in DS2/DS3. */
[data-theme="light"] {
  color-scheme: light;
  --ht-bg-page: #f4f7fb;
  --ht-bg-surface: #ffffff;
  --ht-bg-surface-soft: #f7f9fc;
  --ht-bg-elevated: #ffffff;
  --ht-text-primary: #0f1b2d;
  --ht-text-secondary: #566276;
  --ht-text-muted: #718198;
  --ht-text-disabled: #9aa7b8;
  --ht-border: #d7e0ec;
  --ht-border-soft: rgba(16, 30, 54, 0.10);
  --ht-border-strong: rgba(47, 107, 255, 0.38);
  /* Auf hellem Grund kehrt sich die Richtung um: der helle Ton
     erreicht nur 3.1:1, der tiefere 6.3:1. */
  --ht-primary-text: #1b4fd1;
}

/* Shared visual primitives. Layout remains owned by each feature. */
.ht-card {
  background: var(--ht-bg-surface);
  border: 1px solid var(--ht-border-soft);
  border-radius: var(--ht-radius-md);
}

.ht-card--elevated {
  background: var(--ht-bg-elevated);
  box-shadow: var(--ht-shadow-md);
}

.ht-card--ai {
  border-color: color-mix(in srgb, var(--ht-ai-accent) 38%, transparent);
}

.ht-card--technical {
  border-color: color-mix(in srgb, var(--ht-accent-cyan) 34%, transparent);
}

.ht-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ht-space-2);
  min-height: 40px;
  padding: 0 var(--ht-space-4);
  border: 1px solid transparent;
  border-radius: var(--ht-radius-sm);
  font: var(--ht-font-weight-semibold) var(--ht-font-sm)/1 var(--ht-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ht-btn--primary {
  color: #ffffff;
  background: var(--ht-primary);
}

.ht-btn--primary:hover {
  color: #ffffff;
  background: var(--ht-primary-hover);
}

.ht-btn--secondary {
  color: var(--ht-text-primary);
  background: transparent;
  border-color: var(--ht-border-strong);
}

.ht-btn--secondary:hover,
.ht-btn--ghost:hover {
  color: var(--ht-text-primary);
  background: var(--ht-primary-soft);
  border-color: var(--ht-primary);
}

.ht-btn--danger {
  color: #ffffff;
  background: var(--ht-danger);
}

.ht-btn--danger:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--ht-danger) 84%, #000000);
}

.ht-btn--ghost {
  color: var(--ht-text-secondary);
  background: transparent;
  border-color: transparent;
}

.ht-btn:focus-visible,
.ht-card:focus-visible {
  outline: 0;
  box-shadow: var(--ht-focus-ring);
}

.ht-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ht-space-1);
  padding: var(--ht-space-1) var(--ht-space-2);
  border: 1px solid currentColor;
  border-radius: var(--ht-radius-pill);
  font-size: var(--ht-font-xs);
  font-weight: var(--ht-font-weight-semibold);
  line-height: 1.2;
}

.ht-status--success { color: var(--ht-success); background: var(--ht-success-soft); }
.ht-status--warning { color: var(--ht-warning); background: var(--ht-warning-soft); }
.ht-status--danger { color: var(--ht-danger); background: var(--ht-danger-soft); }
.ht-status--info { color: var(--ht-info); background: var(--ht-info-soft); }
.ht-status--ai { color: var(--ht-ai-accent-hover); background: var(--ht-ai-accent-soft); }
.ht-status--neutral { color: var(--ht-text-secondary); background: var(--ht-bg-surface-soft); }