/* ══════════════════════════════════════════════════════════════
   MyJobFinder AI — Colors & Type Tokens
   Three directions: A=Präzision, B=Kompass, C=Signal
   Drop-in for Flask/Jinja2 app. No build step.
   ══════════════════════════════════════════════════════════════ */

@import url('../fonts/fonts.css');

/* ── SHARED TOKENS ─────────────────────────────────────────── */
:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Easing & duration */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;

  /* Shadows (no coloured shadows, no glow) */
  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.06);
  --shadow-2: 0 2px 4px rgba(15,23,42,.04), 0 4px 8px rgba(15,23,42,.06);
  --shadow-3: 0 8px 16px rgba(15,23,42,.08), 0 16px 32px rgba(15,23,42,.06);
  --shadow-4: 0 24px 48px rgba(15,23,42,.16);

  /* Brand anchor (immovable) */
  --brand-anchor: #153D64;
}

/* ══════════════════════════════════════════════════════════
   DIRECTION A — PRÄZISION (Linear-spirit)
   Apply with [data-direction="a"] or [data-theme="prazision"]
   ══════════════════════════════════════════════════════════ */
[data-direction="a"], :root {
  /* Surfaces */
  --a-bg-0: #FAFAFA;        /* page */
  --a-bg-1: #FFFFFF;        /* card */
  --a-bg-2: #F4F4F5;        /* hover */
  --a-bg-3: #E9EAEC;        /* active */

  /* Ink (deepened from brand anchor #153D64) */
  --a-ink-0: #0B1220;       /* headlines */
  --a-ink-1: #1F2937;       /* body */
  --a-ink-2: #4B5563;       /* secondary */
  --a-ink-3: #9CA3AF;       /* tertiary / placeholder */

  /* Borders */
  --a-border-1: #E5E7EB;
  --a-border-2: #D1D5DB;

  /* Accent (used once per screen, primary CTA only) */
  --a-accent-1: #3B82F6;
  --a-accent-2: #2563EB;
  --a-accent-ring: rgba(59,130,246,.24);

  /* Semantic */
  --a-success: #16A34A;
  --a-warning: #D97706;
  --a-danger:  #DC2626;

  /* ── #1209: Meldungsflaechen, ABGELEITET statt erfunden ──────────────────
     CRO: "Die Farben werden aus dem BESTEHENDEN System abgeleitet, keine
     Standardfarben aus einem Baukasten." Basis sind deshalb genau vier Farben,
     die es hier schon gibt: --a-success, --a-warning, --a-danger und, fuer den
     Hinweis, das Primary Blue #0078AE aus docs/BRAND.md. Ein Hinweis ist keine
     Warnung - er bekommt die Markenfarbe.

     Abgeleitet wird nach der Regel aus #1205: Farbton und Saettigung bleiben,
     nur die Helligkeit wandert. Flaeche = sehr helle Tonung derselben Farbe,
     Schrift = so dunkel wie noetig, keinen Schritt weiter.

     GEMESSEN (WCAG 2.1, 1.4.3 AA verlangt 4,5:1 fuer Text):
       Erfolg   Schrift auf Flaeche  6,15:1
       Hinweis  Schrift auf Flaeche  6,14:1
       Warnung  Schrift auf Flaeche  6,17:1
       Fehler   Schrift auf Flaeche  6,02:1
     Bewusst ueber der Schwelle: die abgeloesten Werte lagen bei 6,8:1, ein Satz
     mit knapp 4,5:1 waere eine Verschlechterung gewesen.

     Der Rahmen traegt KEINE Information (1,4 bis 2,6:1 gegen Weiss). Er ist
     Zierrat; erkannt wird der Zustand an Flaeche, Schrift UND einem Zeichen
     (.meldung::before) - Farbe ist nie die einzige Information. */
  --a-erfolg-flaeche:  #EBFCF1;
  --a-erfolg-rahmen:   #81EEA9;
  --a-erfolg-schrift:  #0F6C31;
  --a-hinweis-flaeche: #E8F8FF;
  --a-hinweis-rahmen:  #70D3FF;
  --a-hinweis-schrift: #00628F;
  --a-warnung-flaeche: #FEF4E9;
  --a-warnung-rahmen:  #FBBC74;
  --a-warnung-schrift: #8B4C04;
  --a-fehler-flaeche:  #FCEBEB;
  --a-fehler-rahmen:   #EB8484;
  --a-fehler-schrift:  #B01C1C;

  /* Score gradient stops */
  --a-score-excellent: #047857;
  --a-score-good:      #10B981;
  --a-score-medium:    #D97706;
  --a-score-low:       #DC2626;

  /* Typography */
  --a-font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --a-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --a-radius: 6px;
  --a-radius-sm: 4px;
  --a-radius-lg: 8px;
}

/* ══════════════════════════════════════════════════════════
   DIRECTION B — KOMPASS (Stripe-editorial spirit)
   ══════════════════════════════════════════════════════════ */
[data-direction="b"] {
  --b-bg-0: #FAF7F2;        /* parchment page */
  --b-bg-1: #FFFEFB;        /* ivory card */
  --b-bg-2: #F4EFE5;        /* hover */
  --b-bg-3: #EBE3D2;        /* active */

  --b-ink-0: #0F2A45;       /* headline */
  --b-ink-1: #153D64;       /* body — brand-true */
  --b-ink-2: #3F5870;       /* secondary */
  --b-ink-3: #8A98A8;       /* tertiary */

  --b-border-1: #E8E0D2;
  --b-border-2: #D6CCB8;

  --b-accent-1: #153D64;    /* navy stays the action colour */
  --b-accent-2: #0F2A45;
  --b-accent-ring: rgba(21,61,100,.20);

  --b-editorial: #B25D2A;   /* copper for pull-quotes / featured */
  --b-editorial-bg: #F4E6D5;

  --b-success: #166534;
  --b-warning: #92400E;
  --b-danger:  #991B1B;

  --b-score-excellent: #14532D;
  --b-score-good:      #166534;
  --b-score-medium:    #92400E;
  --b-score-low:       #991B1B;

  --b-font-display: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --b-font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --b-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --b-radius: 10px;
  --b-radius-sm: 6px;
  --b-radius-lg: 14px;
}

/* ══════════════════════════════════════════════════════════
   DIRECTION C — SIGNAL (data-terminal spirit)
   Dark-canonical, light variant available
   ══════════════════════════════════════════════════════════ */
[data-direction="c"] {
  --c-bg-0: #0E1116;        /* page graphite */
  --c-bg-1: #161A22;        /* card */
  --c-bg-2: #1D222C;        /* hover */
  --c-bg-3: #262B36;        /* active */

  --c-ink-0: #F4F6F9;       /* headline */
  --c-ink-1: #E6E8EC;       /* body */
  --c-ink-2: #9BA3B0;       /* secondary */
  --c-ink-3: #5C6473;       /* tertiary */

  --c-border-1: #262B36;
  --c-border-2: #353B49;

  --c-accent-1: #4A8BD6;    /* brand blue, structure/nav only */
  --c-accent-2: #6BA3E8;
  --c-accent-ring: rgba(74,139,214,.30);

  --c-signal-green:  #3DDC97;  /* match */
  --c-signal-amber:  #F5B75B;  /* warning */
  --c-signal-red:    #F26B6B;  /* blocker */
  --c-signal-blue:   #5BB0FF;  /* info */

  --c-score-excellent: #3DDC97;
  --c-score-good:      #6BD9B5;
  --c-score-medium:    #F5B75B;
  --c-score-low:       #F26B6B;

  --c-font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --c-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --c-radius: 4px;
  --c-radius-sm: 2px;
  --c-radius-lg: 6px;
}

/* ══════════════════════════════════════════════════════════
   SEMANTIC TYPE — per direction
   Consumers reference these, not the raw families.
   ══════════════════════════════════════════════════════════ */

/* Direction A semantic type */
[data-direction="a"] {
  --a-h1-size: 56px; --a-h1-line: 1.05; --a-h1-weight: 700; --a-h1-track: -0.025em;
  --a-h2-size: 36px; --a-h2-line: 1.15; --a-h2-weight: 700; --a-h2-track: -0.02em;
  --a-h3-size: 22px; --a-h3-line: 1.25; --a-h3-weight: 600; --a-h3-track: -0.01em;
  --a-h4-size: 16px; --a-h4-line: 1.35; --a-h4-weight: 600; --a-h4-track: -0.005em;
  --a-body-size: 14px; --a-body-line: 1.55; --a-body-weight: 400;
  --a-small-size: 12px; --a-small-line: 1.45; --a-small-weight: 500;
  --a-eyebrow-size: 11px; --a-eyebrow-line: 1.2; --a-eyebrow-weight: 600;
  --a-eyebrow-track: 0.06em; --a-eyebrow-transform: uppercase;
  --a-mono-size: 13px; --a-mono-line: 1.4;
}

/* Direction B semantic type */
[data-direction="b"] {
  --b-h1-size: 64px; --b-h1-line: 1.0; --b-h1-weight: 500; --b-h1-track: -0.02em;
  --b-h2-size: 42px; --b-h2-line: 1.1; --b-h2-weight: 500; --b-h2-track: -0.015em;
  --b-h3-size: 26px; --b-h3-line: 1.2; --b-h3-weight: 600; --b-h3-track: -0.01em;
  --b-h4-size: 17px; --b-h4-line: 1.4; --b-h4-weight: 600;
  --b-body-size: 15px; --b-body-line: 1.6; --b-body-weight: 400;
  --b-small-size: 13px; --b-small-line: 1.5; --b-small-weight: 500;
  --b-eyebrow-size: 12px; --b-eyebrow-line: 1.2; --b-eyebrow-weight: 600;
  --b-eyebrow-track: 0.08em; --b-eyebrow-transform: uppercase;
  --b-pull-size: 28px; --b-pull-line: 1.3; --b-pull-weight: 400;  /* serif italic */
}

/* Direction C semantic type */
[data-direction="c"] {
  --c-h1-size: 44px; --c-h1-line: 1.1; --c-h1-weight: 700; --c-h1-track: -0.02em;
  --c-h2-size: 28px; --c-h2-line: 1.2; --c-h2-weight: 700; --c-h2-track: -0.015em;
  --c-h3-size: 18px; --c-h3-line: 1.3; --c-h3-weight: 600;
  --c-h4-size: 14px; --c-h4-line: 1.4; --c-h4-weight: 600;
  --c-body-size: 13px; --c-body-line: 1.5; --c-body-weight: 400;
  --c-small-size: 11px; --c-small-line: 1.4; --c-small-weight: 500;
  --c-eyebrow-size: 10px; --c-eyebrow-line: 1.2; --c-eyebrow-weight: 700;
  --c-eyebrow-track: 0.1em; --c-eyebrow-transform: uppercase;
  --c-mono-size: 12px; --c-mono-line: 1.4;
  --c-mono-num: 14px; /* score numerals */
}

/* ══════════════════════════════════════════════════════════
   UTILITY CLASSES (optional sugar)
   ══════════════════════════════════════════════════════════ */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.eyebrow { letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
/* Lucide-style SVG icon utility */
.icon, .nav-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; stroke: currentColor; fill: none; }

/* ══════════════════════════════════════════════════════════
   #898 MOBILE-POLITUR (aus #896-Audit) — Touch-Targets + Scroll-Hint
   Bewusst hier in tokens.css (NICHT in den Templates): tokens.css wird in
   welcome.html / settings.html / connectors.html / index.html JEWEILS NACH dem
   Inline-<style> geladen -> gleiche Spezifität, gewinnt im Cascade. So bleibt der
   parallel weiterentwickelte Wizard-Template (welcome.html) unangetastet.
   Alles strikt im Mobile-Breakpoint -> Desktop bleibt unverändert.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* F-896-2: Touch-Targets >= 44px (Apple-Minimum) */
  .wz-ghost,            /* Wizard Quick-Pick-Chips (~31px hoch) */
  .wz-lang {            /* Wizard Sprach-Switcher DE/EN/… (~25px hoch) */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .wz-lang { min-width: 44px; }
  #nav-hamburger {      /* Dashboard Mobile-Hamburger (~34px) */
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* F-896-3: Scroll-Fade-Hinweis auf horizontalen Tab-/Nav-Strips, damit sichtbar
     ist, dass seitlich mehr Tabs kommen (kein Body-Overflow — reine Optik). */
  .settings-nav,        /* settings.html: mobil flex + overflow-x:auto */
  .conn-tabs {          /* connectors.html: flex + overflow-x:auto */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), rgba(0,0,0,0.2));
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), rgba(0,0,0,0.2));
  }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   #1189 Phase C: der Hinweis auf KI-Einsatz (partials/ki_hinweis_text.html).
   Steht hier und nicht je Vorlage, weil alle betroffenen Seiten (die vier Coaches und die
   Firmenseite) tokens.css laden - eine Stelle statt fuenf.
   Gestaltung wie beim Bildhinweis: eine ruhige Zeile im Register einer Quellenangabe, NICHT
   kleiner als die uebrigen Fussnoten, ausreichender Kontrast (#6f5b41 auf hellem Grund
   ergibt 6,09:1). Auf dunklen Kopfbereichen die helle Fassung, dort 4,9:1 gegen #153D64.
   ══════════════════════════════════════════════════════════════════════════════════════ */
/* Die Kennzeichnung muss ueberall GLEICH gross sein. Die Coach-Seiten setzen eigene
   p-Regeln (.hero p, .sc-hero p ...) in einem <style>-Block, der NACH tokens.css laedt -
   bei gleicher Spezifitaet gewinnt der spaetere. Gemessen kamen dadurch 16px und 13px
   heraus statt 13,5px. p[data-ki-art].ki-hinweis liegt darueber und setzt das gerade. */
p[data-ki-art].ki-hinweis,
.ki-hinweis {
  margin: 12px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6f5b41;
  letter-spacing: .1px;
}
p[data-ki-art].ki-hinweis-hell,
.ki-hinweis-hell {
  /* .82 ergab auf dem blauen Kopf (#0078AE) nur 3,82:1. */
  color: rgba(255, 255, 255, .95);
}
@media (max-width: 640px) {
  p[data-ki-art].ki-hinweis,
  .ki-hinweis { font-size: 13px; margin-top: 10px; padding: 0 14px; }
}

/* ══════════════════════════════════════════════════════════
   #1209 MELDUNGEN - eine Bauform fuer vier Zustaende
   ══════════════════════════════════════════════════════════
   Die Farben stehen oben als Tokens und sind aus dem bestehenden System
   abgeleitet (Begruendung und Messwerte dort).

   FARBE IST NIE DIE EINZIGE INFORMATION: jeder Zustand traegt zusaetzlich ein
   Zeichen. Es steht in ::before und ist fuer Vorlesewerkzeuge unsichtbar
   (aria-hidden waere an einem Pseudo-Element nicht moeglich; Inhalt aus CSS
   wird von Vorlesewerkzeugen ohnehin uneinheitlich behandelt). Die Bedeutung
   fuer Hilfstechnik kommt deshalb aus role="status" bzw. role="alert" am
   Element selbst - nicht aus der Farbe und nicht aus dem Zeichen. */
.meldung {
  display: none;                 /* die Seiten schalten sie sichtbar */
  padding: 12px 14px;
  border-radius: 7px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid transparent;
}
.meldung::before {
  font-weight: 700;
  margin-right: 8px;
}
.meldung-erfolg {
  background: var(--a-erfolg-flaeche);
  border-color: var(--a-erfolg-rahmen);
  color: var(--a-erfolg-schrift);
}
.meldung-erfolg::before { content: "\2713"; }        /* Haken */
.meldung-hinweis {
  background: var(--a-hinweis-flaeche);
  border-color: var(--a-hinweis-rahmen);
  color: var(--a-hinweis-schrift);
}
.meldung-hinweis::before { content: "i"; font-style: italic; }
.meldung-warnung {
  background: var(--a-warnung-flaeche);
  border-color: var(--a-warnung-rahmen);
  color: var(--a-warnung-schrift);
}
.meldung-warnung::before { content: "!"; }
.meldung-fehler {
  background: var(--a-fehler-flaeche);
  border-color: var(--a-fehler-rahmen);
  color: var(--a-fehler-schrift);
}
.meldung-fehler::before { content: "\2715"; }        /* Kreuz */