/* ===========================================================================
   Cockpit v2 — Design Tokens (Cyan-Mono / Warm-Paper · Navy-Glass)
   ---------------------------------------------------------------------------
   Kanonisch = abgenommene Prototypen (Kandidaten-Dossier 3.0-11, 16.06.2026).
   Grundsatz (2026-05-11 Refactor, Warm-Paper-Update 06.06.2026):
     - Cyan #1FB5E8 ist die EINZIGE Akzentfarbe (Marken-Signal, sparsam).
     - Light = Warm Paper (#F7F5F0 BG / #FFFFFF Card / #0A0A0A Ink) — Default.
       Card bleibt reinweiß; das warme Off-White ist nur der Seiten-Anker.
     - Dark = Navy Glass (#0E1822 / #172230 / #F3F5F8) — via data-theme="dark"
       oder System-Preference.
     - Borders statt Schatten (1px solid line).
     - Aurora-Background entfernt — minimalistischer.
     - Mono-Font nur für Daten (IDs, Zahlen, Hex).
     - Public-Site (Job/show, Profile) unverändert — nutzt starmatch-tokens.css.

   Theme-Strategie:
     - Default = Light (Warm Paper)
     - [data-theme="dark"] = Dark (Navy Glass)
     - System-Theme als Fallback wenn kein data-theme gesetzt
   =========================================================================== */

/* ---------- Fonts ---------- */

/* Sans = Lufga (StarYou-Hausschrift, schon eingebunden via starmatch-tokens.css). */

@font-face {
  font-family: 'Lufga';
  src: local('Lufga'), url('fonts/LufgaRegular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Lufga';
  src: local('Lufga'), url('fonts/LufgaMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Lufga';
  src: local('Lufga'), url('fonts/LufgaSemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Lufga';
  src: local('Lufga'), url('fonts/LufgaBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Lufga';
  src: local('Lufga'), url('fonts/LufgaExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: optional;
}

/* Mono = JetBrains Mono — programmer-grade, optimiert für klein-Lesbarkeit */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

/* ---------- Tokens: Default = Light (Warm Paper) ----------
   #0A0A0A ist Schwarz, nicht Navy — bewusst entkoppelt vom Dark-Theme.
   =========================================================================== */

:root {
  /* Surfaces — Warm Off-White (06b): cremiger BG für leichten Wärme-Anker
     ohne die Modern-Pure-Disziplin (Schwarz als Ink, Cyan als einziger
     Akzent) zu verwässern. Card bleibt reinweiß. */
  --c2-bg: #F7F5F0;
  --c2-card: #FFFFFF;
  --c2-card-solid: #FFFFFF;
  --c2-surface-2: #F0EDE4;

  /* Top-Fade-Gradient — Header läuft ins Weiße, danach ins warme Off-White.
     Background-image überlagert background-color, daher: top transparent
     auf weißem Stop-Wert. background-attachment:fixed → scrollt nicht mit. */
  --c2-aurora-bg: linear-gradient(to bottom, #FFFFFF 0%, transparent 240px);

  /* Ink (Text) */
  --c2-ink:   #0A0A0A;
  --c2-ink-2: #5F5F5F;
  --c2-ink-3: #A0A0A0;

  /* Lines / Borders */
  --c2-line:   rgba(0, 0, 0, 0.06);
  --c2-line-2: rgba(0, 0, 0, 0.10);
  --c2-line-3: rgba(0, 0, 0, 0.16);

  /* Accent — Cyan ist die einzige Akzentfarbe (Marken-Signal) */
  --c2-accent:    #1FB5E8;
  --c2-accent-2:  #1FB5E8;             /* gleicher Wert — Mono-Akzent, kein zweites Hue */
  --c2-on-accent: #04222E;             /* Text/Icons AUF gefülltem Cyan (~8:1) statt Weiß (~2,4:1) */
  /* accent-text = dunklerer Cyan für Text auf hellem BG (WCAG-AA Lesbarkeit).
     #0A7AAA auf #FFFFFF: Kontrast 5.5:1, #1FB5E8 nur 2.3:1 → unlesbar. */
  --c2-accent-text: #0A7AAA;

  /* Subtile Cyan-Tile für Active-States — sparsam einsetzen */
  --c2-accent-tile: rgba(31, 181, 232, 0.10);
  --c2-accent-tile-strong: rgba(31, 181, 232, 0.18);

  /* Status-Farben — URGENT (warn), ÜBERFÄLLIG (danger), VORLAGE (success)
     sind die einzigen erlaubten Nicht-Cyan-Signale. success differenziert
     „dem Kunden vorgestellt" (Milestone) von Shortlist-Cyan. */
  --c2-ok:      #1FB5E8;                /* mapped auf accent */
  --c2-warn:    #9A6A13;                /* Amber-Bronze für Light */
  --c2-warn-tile: rgba(154, 106, 19, 0.10);
  --c2-danger:  #B8392A;                /* dunkles Rot für Light */
  --c2-danger-tile: rgba(184, 57, 42, 0.10);
  --c2-success: #2D9C3F;                /* Grün für VORLAGE-Milestone, Light */
  --c2-success-tile: rgba(45, 156, 63, 0.10);

  /* Glass-Tints aus Cyan abgeleitet — falls noch verwendet */
  --c2-glass-a: var(--c2-accent-tile);
  --c2-glass-b: var(--c2-accent-tile);

  /* Typography */
  --c2-font-sans: 'Lufga', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --c2-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --c2-r-card:    14px;
  --c2-r-button:   8px;
  --c2-r-chip:     6px;
  --c2-r-tag:      3px;

  /* Shadows: Borders statt Schatten — Shadows entfernt */
  --c2-shadow-card: none;
  --c2-shadow-card-urgent: none;
  --c2-shadow-glow-danger: none;

  /* Backdrop-filter (Glas) — im Light-Theme keine Glas-Optik */
  --c2-blur-card: none;
  --c2-blur-chip: none;

  /* Spacing-Skala */
  --c2-space-1: 4px;
  --c2-space-2: 6px;
  --c2-space-3: 8px;
  --c2-space-4: 10px;
  --c2-space-5: 11px;
  --c2-space-6: 12px;
  --c2-space-7: 14px;
  --c2-space-8: 18px;
  --c2-space-9: 24px;

  /* Typo-Skala (Design-System 3.0) — ersetzt ad-hoc px-Font-Sizes.
     Mobil-Override siehe @media (max-width:600px) am Dateiende. */
  --c2-fs-display: 30px;   /* Kandidaten-/Projektname */
  --c2-fs-h1:      23px;   /* Seiten-Titel */
  --c2-fs-h2:      18px;   /* Sektions-Überschrift */
  --c2-fs-body:    15px;   /* Fließtext */
  --c2-fs-name-scan:  15px; /* Personen-Namen · Scan (fremde Pools, Recruiter) — Weight 700 */
  --c2-fs-name-known: 18px; /* Personen-Namen · Kenner (Team, Beratung, bekannte) — Weight 800 */
  --c2-fs-small:   13px;   /* sekundär */
  --c2-fs-label:   11px;   /* UPPERCASE-Eyebrows/Badges */
  --c2-fs-micro:   10px;   /* Meta — harte Untergrenze */

  /* ---- Schriftgewichte (verbindlich, Review 22) ----------------------- */
  --c2-fw-regular:  400;
  --c2-fw-medium:   500;
  --c2-fw-semibold: 600;
  --c2-fw-bold:     700;   /* Standard für Headings & starke Labels */
  --c2-fw-heavy:    800;   /* NUR für numerische Score-Displays (Ring/Orb/Zahl) */

  /* ---- Letter-Spacing (verbindlich, Review 22) ------------------------ */
  --c2-ls-display: -0.01em;   /* Display + H1 */
  --c2-ls-heading: -0.005em;  /* H2 */
  --c2-ls-body:     0;
  --c2-ls-caps:     0.05em;    /* Micro/Label uppercase */

  --c2-lh-tight:   1.2;
  --c2-lh:         1.5;

  /* ---- Header/Topbar (Design-Konsolidierung „Header", 2026-07-16) ------
     Verbindliche Header-Tokens für das geteilte _partials/c2/topbar.php.
     Reine Deklarationen — greifen erst, wenn eine View das Partial nutzt. */
  --c2-topbar-h:        60px;   /* Höhe Desktop */
  --c2-topbar-h-mobile: 52px;   /* Höhe < --c2-topbar-bp */
  --c2-topbar-gap:      12px;   /* Abstand Brand · Crumb · Meta */
  --c2-topbar-icon:     18px;   /* Icon-Größe (Touch-Ziel bleibt ≥44px) */
  --c2-topbar-bp:       720px;  /* Breakpoint app↔mobile-Kollaps */
  --c2-crumb-max:       42ch;   /* Crumb/Titel-Breite, ab hier Ellipsis */
  --c2-topbar-z:        40;     /* sticky-Stapelkontext (app) */
}

/* ---------- Tokens: Dark Override (Navy Glass) ---------- */

[data-theme="dark"] {
  --c2-bg: #0E1822;
  --c2-card: #172230;
  --c2-card-solid: #172230;
  --c2-surface-2: #1F2C3B;

  --c2-aurora-bg: none;

  --c2-ink:   #F3F5F8;
  --c2-ink-2: #9AA6B5;
  --c2-ink-3: #5E6A78;

  --c2-line:   rgba(255, 255, 255, 0.06);
  --c2-line-2: rgba(255, 255, 255, 0.10);
  --c2-line-3: rgba(255, 255, 255, 0.18);

  /* Accent bleibt Cyan — Dark hat zusätzlich noch ein subtiles Hover-Glow */
  --c2-accent:    #1FB5E8;
  --c2-accent-2:  #5FD3F3;             /* Hover/Glow nur im Dark */
  --c2-on-accent: #04222E;
  /* Im Dark ist accent selbst gut lesbar auf dunklem BG — kein extra Text-Token nötig */
  --c2-accent-text: #5FD3F3;

  --c2-accent-tile: rgba(31, 181, 232, 0.14);
  --c2-accent-tile-strong: rgba(31, 181, 232, 0.24);

  --c2-ok:      #1FB5E8;
  --c2-warn:    #E0A83D;                /* Bernstein im Dark */
  --c2-warn-tile: rgba(224, 168, 61, 0.14);
  --c2-danger:  #EF6A52;                /* helleres Rot-Orange im Dark */
  --c2-danger-tile: rgba(239, 106, 82, 0.16);
  --c2-success: #5FCC72;                /* helleres Grün im Dark */
  --c2-success-tile: rgba(95, 204, 114, 0.16);

  --c2-glass-a: var(--c2-accent-tile);
  --c2-glass-b: var(--c2-accent-tile);

  --c2-shadow-card: none;
  --c2-shadow-card-urgent: none;
  --c2-shadow-glow-danger: none;

  --c2-blur-card: none;
  --c2-blur-chip: none;
}

/* ---------- System-Theme-Fallback (Dark wenn System dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --c2-bg: #0E1822;
    --c2-card: #172230;
    --c2-card-solid: #172230;
    --c2-surface-2: #1F2C3B;
    --c2-aurora-bg: none;
    --c2-ink:   #F3F5F8;
    --c2-ink-2: #9AA6B5;
    --c2-ink-3: #5E6A78;
    --c2-line:   rgba(255, 255, 255, 0.06);
    --c2-line-2: rgba(255, 255, 255, 0.10);
    --c2-line-3: rgba(255, 255, 255, 0.18);
    --c2-accent:    #1FB5E8;
    --c2-accent-2:  #5FD3F3;
    --c2-accent-text: #5FD3F3;
    --c2-on-accent: #04222E;
    --c2-accent-tile: rgba(31, 181, 232, 0.14);
    --c2-accent-tile-strong: rgba(31, 181, 232, 0.24);
    --c2-ok:      #1FB5E8;
    --c2-warn:    #E0A83D;
    --c2-warn-tile: rgba(224, 168, 61, 0.14);
    --c2-danger:  #EF6A52;
    --c2-danger-tile: rgba(239, 106, 82, 0.16);
    --c2-success: #5FCC72;
    --c2-success-tile: rgba(95, 204, 114, 0.16);
    --c2-glass-a: var(--c2-accent-tile);
    --c2-glass-b: var(--c2-accent-tile);
    --c2-shadow-card: none;
    --c2-shadow-card-urgent: none;
    --c2-shadow-glow-danger: none;
    --c2-blur-card: none;
    --c2-blur-chip: none;
  }
}

/* ---------- Body-Setup ---------- */

body.c2-page {
  font-family: var(--c2-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c2-ink);
  background-color: var(--c2-bg);
  background-image: var(--c2-aurora-bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  min-height: 100vh;
}

/* ---------- Util-Klassen (für Preview-Seite, weiterhin gebraucht) ---------- */

.c2-mono       { font-family: var(--c2-font-mono); }
.c2-eyebrow    { font-family: var(--c2-font-mono); font-size: 9.5px; font-weight: 700;
                 text-transform: uppercase; letter-spacing: 0.16em; color: var(--c2-ink-3); }
.c2-h1         { font-family: var(--c2-font-sans); font-weight: 800; font-size: 26px;
                 letter-spacing: -0.025em; line-height: 1.1; color: var(--c2-ink); margin: 0; }

.c2-card       { background: var(--c2-card); border: 1px solid var(--c2-line-2);
                 border-radius: var(--c2-r-card); padding: 11px 12px; }
.c2-card-urgent { border-color: var(--c2-warn); }

.c2-tag        { font-family: var(--c2-font-mono); font-size: 9px;
                 padding: 1.5px 5px; border-radius: var(--c2-r-tag);
                 background: transparent; color: var(--c2-ink-2);
                 border: 1px solid var(--c2-line-2); letter-spacing: 0.3px; }
.c2-tag-hot    { background: var(--c2-accent-tile); color: var(--c2-accent);
                 border-color: var(--c2-accent); }

/* Filter-Chip = Pillbar-Pill. Active-State: Cyan-Ring + Cyan-Text + Cyan-Tile.
   KEIN schwarzer Fill mehr (sah aus wie selektiert-und-tot, jetzt sieht aus
   wie selektiert-und-lebt). */
.c2-chip       { display: inline-flex; align-items: center; gap: 6px;
                 padding: 6px 6px 6px 10px;
                 border-radius: var(--c2-r-chip);
                 border: 1px solid var(--c2-line-2);
                 background: var(--c2-card); color: var(--c2-ink);
                 font-family: var(--c2-font-mono); font-size: 10.5px; font-weight: 700;
                 letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; }
.c2-chip:hover { border-color: var(--c2-line-3); }
.c2-chip.is-active {
                 background: var(--c2-accent-tile);
                 color: var(--c2-accent);
                 border-color: var(--c2-accent); }
.c2-chip-count {
                 font-family: var(--c2-font-mono); font-size: 9.5px; font-weight: 700;
                 padding: 2px 5px; border-radius: var(--c2-r-tag);
                 background: var(--c2-accent-tile); color: var(--c2-accent);
                 letter-spacing: 0; font-variant-numeric: tabular-nums; }
.c2-chip.is-active .c2-chip-count {
                 background: var(--c2-accent-tile-strong); color: var(--c2-accent); }

/* ---------- Typo: Mobil-Override (Design-System 3.0) ----------
   Body 15→16px (iOS-Input-Zoom-sicher), Display/H1/H2 etwas kleiner.
   micro bleibt bei 11px Untergrenze. */
@media (max-width: 600px) {
  :root {
    --c2-fs-display: 25px;
    --c2-fs-h1:      20px;
    --c2-fs-h2:      17px;
    --c2-fs-body:    16px;
    --c2-fs-small:   14px;
    --c2-fs-micro:   11px;
  }
}