/* ============================================================================
 * Provetra Design-Tokens – Theme-Kontrakt v2 (IDEE-007, Schritt 1 + 3)
 *
 * EINZIGE Stelle im Frontend, an der rohe Farbwerte, Radien, Abstände,
 * Schatten und Typo-Stufen stehen dürfen (test/brand-tokens.test.js erzwingt
 * das). Die drei UIs (app.html, index-api.html, operator.html) konsumieren
 * ausschließlich var(--…).
 *
 * Kunden-Theming (Managed Hosting): /theme/theme.css wird NACH dieser Datei
 * geladen und überschreibt nur :root-Variablen (Werte, nie Selektoren) –
 * fehlt das Theme-Volume, gilt das Provetra-Default aus dieser Datei.
 *
 * Quellen der Default-Werte:
 *   - docs/brand/provetra-brand-guide.pdf (v1.2) – Farbe/Typo/Marke
 *   - Provetra Design System (claude.ai/design, Projekt 301274f9-…) –
 *     tokens/{colors,typography,spacing}.css: Skalen-Ebene (v2), d. h.
 *     Abstände, Radien, Schatten, Typo-Hierarchie, Fokus-Ring, Transitions.
 *     Import-/Sync-Anleitung: CLAUDE.md „Design-System-Anbindung".
 * ==========================================================================*/

/* ---- Schriften (self-hosted, SIL OFL 1.1 – Lizenz: /public/fonts/OFL.txt) */
@font-face {
    font-family: 'Poppins';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('/public/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal; font-weight: 700; font-display: swap;
    src: url('/public/fonts/poppins-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('/public/fonts/lato-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal; font-weight: 700; font-display: swap;
    src: url('/public/fonts/lato-700.woff2') format('woff2');
}
/* Noto Sans Mono ist ein Variable Font – EINE Datei deckt 400–700 ab. */
@font-face {
    font-family: 'Noto Sans Mono';
    font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('/public/fonts/noto-sans-mono.woff2') format('woff2');
}

:root {
    /* ---- Rohpalette (Brand Guide §03) – nur als Quelle der semantischen
       Tokens; Komponenten-CSS greift NIE direkt auf --pv-* zu. ---- */
    --pv-petrol:      #0E5A63;
    --pv-petrol-dark: #0A3E45;
    --pv-mint:        #BFE5DE;
    --pv-copper:      #C9703A;
    --pv-ink:         #1B262C;
    --pv-slate:       #5A6B72;
    --pv-fog:         #E9ECEA;
    --pv-paper:       #FAF8F4;
    --pv-success:     #2F9E6E;
    --pv-warning:     #D9A036;
    --pv-error:       #C4453C;
    --pv-info:        #3E7CB1;

    /* ---- Semantische Tokens (der eigentliche Theme-Kontrakt) ---- */
    /* Marke / Interaktion */
    --primary:        var(--pv-petrol);
    --primary-hover:  #0C4E56;              /* Petrol-600: Hover DUNKELT (DS-Regel) */
    --primary-dark:   var(--pv-petrol-dark);/* Petrol-Dunkel: aktiv/gedrückt */
    --primary-soft:   #E7F0EE;              /* Petrol-Tint: ghost-hover, Adress-Pill */
    --primary-border: var(--pv-mint);       /* helle Marken-Kante (Banner, QR-Box) */
    --on-primary:     #FFFFFF;              /* Text/Icons auf Primärflächen */
    --accent:         var(--pv-copper);     /* sparsam (~10 %), Brand Guide §03 */
    --accent-hover:   #B5622F;
    --accent-bg:      #F4E4D9;
    --accent-text:    #8F4E24;

    /* Flächen / Text */
    --bg:             var(--pv-paper);
    --card:           #FFFFFF;
    --surface-2:      #F2F4F3;              /* Chips, Tabellenkopf, Hover auf Karten */
    --surface-3:      #E3E8E6;              /* Hover auf surface-2 */
    --text:           var(--pv-ink);
    --muted:          var(--pv-slate);
    --disabled:       #A9B4B8;
    --border:         var(--pv-fog);        /* Haarlinie: Karten, Trenner */
    --border-strong:  #D3D8D5;              /* Eingabefeld-Kontur (DS) */

    /* Funktionsfarben (UI-Status, Brand Guide §03) */
    --ok:             var(--pv-success);
    --ok-bg:          #E0F1E9;
    --ok-text:        #1E6647;
    --ok-border:      #BEE2D1;
    --err:            var(--pv-error);
    --err-dark:       #A23A32;              /* danger-hover */
    --err-bg:         #F7E1DF;
    --err-text:       #8E322B;
    --err-border:     #EBC4C0;
    --warn:           var(--pv-warning);
    --warn-bg:        #F8EDD6;
    --warn-text:      #7A5A1E;
    --info:           var(--pv-info);
    --info-bg:        #E2ECF5;
    --info-text:      #2C5A82;
    --neutral-bg:     var(--pv-fog);
    --neutral-text:   #3F4C52;

    /* Typografie (Brand Guide §04; Web-Fallback system-ui) */
    --font-sans:      'Lato', -apple-system, system-ui, 'Segoe UI', Arial, sans-serif;
    --font-heading:   'Poppins', -apple-system, system-ui, 'Segoe UI', sans-serif;
    --font-mono:      'Noto Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---- Schatten: dezent + kühl (Petrol-getönt), NIE am Logo (DS/Guide) ---- */
    --shadow-xs:      0 1px 2px rgba(10, 62, 69, .06);
    --shadow-sm:      0 1px 3px rgba(10, 62, 69, .08), 0 1px 2px rgba(10, 62, 69, .06);
    --shadow-md:      0 4px 12px rgba(10, 62, 69, .10);
    --shadow-lg:      0 12px 32px rgba(10, 62, 69, .14);
    --shadow-overlay: 0 20px 60px rgba(10, 62, 69, .22);
    /* Semantische Aliase (bestehender Kontrakt, jetzt auf die DS-Stufen gemappt) */
    --shadow-card:    var(--shadow-xs);
    --shadow-raised:  var(--shadow-md);
    --shadow-modal:   var(--shadow-overlay);
    /* Modal-Scrim: einzige Transparenz/Blur-Fläche des Systems (DS) */
    --backdrop:       rgba(10, 62, 69, .42);
    --backdrop-blur:  2px;

    /* ---- Fokus + Bewegung (DS: ruhig, 120/180 ms ease, kein Bounce) ---- */
    --focus-ring:       0 0 0 3px rgba(14, 90, 99, .12);
    --transition-fast:  120ms ease;
    --transition-base:  180ms ease;

    /* ---- Abstände: 4px-Basisraster (DS tokens/spacing.css) ---- */
    --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;

    /* ---- Eckradien: ruhig, nie verspielt (DS) ---- */
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius-md:    10px;   /* Standard: Buttons, Inputs, kleine Flächen */
    --radius-lg:    14px;   /* Karten/Container */
    --radius-xl:    20px;   /* große Flächen, Dialoge */
    --radius-badge: 28px;   /* App-Kachel */
    --radius-pill:  999px;

    /* ---- Typo-Hierarchie (DS tokens/typography.css; Satzschreibung) ---- */
    --type-h1-size: 28px;    --type-h1-line: 34px;
    --type-h2-size: 20px;    --type-h2-line: 26px;
    --type-h3-size: 17px;    --type-h3-line: 24px;
    --type-body-size: 15px;  --type-body-line: 22px;
    --type-small-size: 13px; --type-small-line: 19px;
    --type-caption-size: 12px; --type-caption-line: 16px;
    --type-code-size: 13px;  --type-code-line: 18px;
    --weight-body: 400;
    --weight-body-strong: 600;
    --weight-body-bold: 700;
    --weight-display: 500;      /* Poppins Medium – Headlines */
    --weight-display-bold: 700;
    --tracking-caption: .08em;  /* Caption/Label gesperrt (einzige Versalien) */

    /* Kamera-Scan (app.html): Video-Bühne + Zielrahmen */
    --scan-bg:           #000000;
    --scan-reticle:      rgba(255, 255, 255, .55);
    --scan-scrim:        rgba(0, 0, 0, .28);
    --scan-scrim-strong: rgba(0, 0, 0, .45);
    --scan-hint:         #FFFFFF;
    --scan-hint-shadow:  0 1px 3px rgba(0, 0, 0, .8);

    /* Proben-Graph (D3, index-api/operator) */
    --graph-edge:          #9DA9AE;
    --graph-node:          #8A979D;
    --graph-node-external: #CBD4D2;

    /* Begleitdokument-Druck (bewusst schwarz auf weiß, druckerneutral) */
    --print-paper: #FFFFFF;
    --print-ink:   #000000;
    --print-muted: #333333;
    --print-line:  #999999;
}