/* ==========================================================================
   SCHOTT+PARTNER Goldton-Branding — zentrale CSS-Variablen

   Quellen: .mission-prep/ci-und-firmenkontext.md
   Goldton: #a6895a (Primary), #8B7150 (Dark), #E7DDCC (Light)
   ========================================================================== */

/* ==========================================================================
   Webfonts — selbst gehostet (DSGVO, kein Font-CDN zur Laufzeit)

   Source Sans 3 (Body/UI), Source Serif 4 (Display/Headings), IBM Plex Mono
   (Mono). Alle SIL OFL-1.1 (Lizenzdateien: OFL-*.txt in diesem Verzeichnis).
   woff2 latin-Subset, font-display: swap, ausgeliefert via whitenoise unter
   /static/fonts/.
   ========================================================================== */

/* Source Sans 3 */
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/static/fonts/source-sans-3-latin-300-normal.08452274ec91.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/source-sans-3-latin-400-normal.27ab01c4cb50.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/source-sans-3-latin-500-normal.b3b7577030b9.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/source-sans-3-latin-600-normal.9a35cba76eda.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/source-sans-3-latin-700-normal.9b13bd3653e3.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/static/fonts/source-sans-3-latin-900-normal.98806837e002.woff2") format("woff2");
}

/* Source Serif 4 */
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/static/fonts/source-serif-4-latin-300-normal.d1816a6d400c.woff2") format("woff2");
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/source-serif-4-latin-400-normal.95bbd98f2b3c.woff2") format("woff2");
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/source-serif-4-latin-500-normal.157b737cd293.woff2") format("woff2");
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/source-serif-4-latin-600-normal.beb0c8d8bee8.woff2") format("woff2");
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/source-serif-4-latin-700-normal.45959eeff97f.woff2") format("woff2");
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/static/fonts/source-serif-4-latin-900-normal.77d8552d9bd5.woff2") format("woff2");
}

/* IBM Plex Mono */
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/ibm-plex-mono-latin-600-normal.5a2ce7798732.woff2") format("woff2");
}

:root {
    /* ----------------------------------------------------------------------
       Goldton-Branding (v4: --gold-primary auf Claudes #a6895a)
       Bestehende Variablennamen bleiben erhalten (von Screen-CSS referenziert).
       ---------------------------------------------------------------------- */
    --gold-primary: #a6895a;
    --gold-dark: #8B7150;
    --gold-light: #E7DDCC;

    /* Gold-Rampe 050–700 */
    --gold-050: #f7f2e8;
    --gold-100: #efe6d4;
    --gold-200: #e2d4b9;
    --gold-300: #cdb893;
    --gold-400: #b89c6f;
    --gold-500: #a6895a;
    --gold-600: #8f7745;
    --gold-700: #7d6736;
    --gradient-gold-band: linear-gradient(90deg, #a6895a, #cdb893);

    /* Branchenfarben — verbindliche CI-Hex (NICHT Claudes hellere Werte) */
    --branche-bau: #F48F24;
    --branche-ftw: #0EA84C;
    --branche-ks: #A4A9AB;
    --branche-ni: #EAD92C;
    --branche-tb: #ED3430;
    --branche-ama: #0EB7BA;
    --branche-tga: #1C9CD3;

    /* Neutral-/Ink-Rampe */
    --neutral-050: #f6f7f8;
    --neutral-100: #eef0f2;
    --neutral-200: #dde0e3;
    --neutral-300: #c2c7cb;
    --neutral-400: #9aa0a5;
    --neutral-500: #767b80;
    --neutral-600: #5c6166;
    --neutral-700: #44484c;
    --neutral-800: #2b2e31;
    --neutral-900: #1a1c1e;

    /* Textfarben (bestehende Namen behalten + neue Ink-Tokens) */
    --text-on-gold: #FFFFFF;
    --text-on-gold-dark: #1F1A12;
    --text-primary: #333333;
    --text-muted: #767b80;
    --text-heading: #1a1c1e;
    --text-body: #44484c;
    --text-faint: #9aa0a5;
    --text-link: #7d6736;

    /* Akzent (semantisch) */
    --color-accent: #a6895a;
    --color-accent-strong: #7d6736;
    --surface-accent: #a6895a;
    --surface-accent-soft: #f7f2e8;

    /* Hintergründe (bestehende Namen) + Surface-Rampe */
    --bg-body: #f5f3f0;
    --bg-white: #ffffff;
    --surface-page: #ffffff;
    --surface-card: #ffffff;
    --surface-sunken: #f6f7f8;
    --surface-muted: #eef0f2;
    --surface-dark: #1a1c1e;

    /* Border-Rampe */
    --border-hairline: #dde0e3;
    --border-default: #c2c7cb;
    --border-strong: #44484c;
    --border-accent: #a6895a;

    /* Schrift-Stacks (selbst gehostet, mit System-Fallbacks) */
    --font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Typo-Skala */
    --font-size-display: 3rem;
    --font-size-h1: 2.25rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.375rem;
    --font-size-h4: 1.125rem;
    --font-size-body-lg: 1.0625rem;
    --font-size-body: 0.9375rem;
    --font-size-sm: 0.8125rem;
    --font-size-xs: 0.6875rem;

    /* Gewichte */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Zeilenhöhen */
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.45;
    --line-height-relaxed: 1.6;

    /* Laufweiten */
    --letter-spacing-caps: 0.14em;
    --letter-spacing-label: 0.08em;
    --letter-spacing-tight: -0.01em;

    /* Abstands-Skala (space 0..10) */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;

    /* Radien */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-pill: 999px;

    /* Schatten */
    --shadow-card: 0 1px 3px rgba(26, 28, 30, 0.08), 0 1px 1px rgba(26, 28, 30, 0.04);
    --shadow-sm: 0 1px 2px rgba(26, 28, 30, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 28, 30, 0.1);
    --shadow-lg: 0 12px 32px rgba(26, 28, 30, 0.14);

    /* Motion */
    --motion-dur-fast: 120ms;
    --motion-dur-normal: 200ms;
    --motion-dur-slow: 320ms;
    --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* Container-Breiten + Sidebar */
    --container-text: 960px;
    --container-narrow: 720px;
    --container-wide: 1200px;
    --container-max: 1320px;
    --sidebar-w: 345px;
}

/* ==========================================================================
   Globale Element-Defaults

   Body nutzt die selbst gehostete Sans (löst den same-origin woff2-Request
   aus; kein Font-CDN zur Laufzeit). Konsistente Body-Hintergrundfarbe über
   alle Screens. Überschriften folgen der Typo-Skala; Display nutzt die Serif.
   ========================================================================== */
body {
    font-family: var(--font-sans);
    color: var(--text-body);
    background-color: var(--bg-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-sans);
    color: var(--text-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

/* Display-Variante (Wortmarke/Hero): Source Serif 4 */
.display,
.text-display {
    font-family: var(--font-serif);
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-heading);
}

a {
    color: var(--text-link);
}

a:hover,
a:focus {
    color: var(--color-accent-strong);
}

/* Button-Basis im Goldton (Screen-CSS darf ergänzen/überschreiben) */
.btn-gold {
    background-color: var(--gold-primary);
    color: var(--text-on-gold);
    border: none;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    transition: background-color var(--motion-dur-fast) var(--motion-ease-standard);
}

.btn-gold:hover,
.btn-gold:focus,
.btn-gold:active {
    background-color: var(--gold-dark);
    color: var(--text-on-gold);
}

/* Globaler Fokus-Indikator: sichtbarer Gold-Ring bei Tastatur-Fokus auf
   allen Screens (auch Login/Hilfe, die chat.css nicht laden). */
*:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
}

/* Bootstrap setzt .btn:focus-visible { outline: 0 } (höhere Spezifität als
   *:focus-visible) und ersetzt den Ring durch einen blauen Box-Shadow.
   Hier mit gleicher Spezifität, aber späterer Quell-Reihenfolge auf den
   Gold-Ring zurücksetzen, damit Tastatur-Fokus auf btn-gold/btn-neuer-chat
   sichtbar bleibt. */
.btn:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* Font-Preloader: erzwingt das Laden aller drei selbst gehosteten Familien
   auf jeder Seite (document.fonts.check === true), bleibt visuell unsichtbar. */
.font-preload {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.font-preload-serif {
    font-family: var(--font-serif);
}

.font-preload-mono {
    font-family: var(--font-mono);
}