/*
 * Finalink – Darkmode
 *
 * Belegt die Rollen-Tokens aus app.css dunkel; Komponenten bleiben unveraendert.
 * Eingebunden wird die Datei im App-Layout nach app.css. Ob sie greift, steuert
 * ihr media-Attribut (App\Helpers\Theme):
 *   - wie System: screen and (prefers-color-scheme: dark)
 *   - dunkel:     screen
 *   - hell:       not all
 * Gedruckt wird immer hell.
 *
 * Kontraste: Text und Links mindestens 4.5:1 auf Flaeche, Hintergrund und
 * Hinweisflaechen; weisser Text auf Primaer- und Gefahrflaechen ebenso.
 */

:root {
    color-scheme: dark;

    /* Rollen */
    --color-bg:             #0d1424;
    --color-surface:        #141c2f;
    --color-surface-muted:  #19223a;
    --color-surface-raised: #1a2439;
    --color-input:          #0f1729;
    --color-fill:           #232d47;
    --color-fill-text:      #c5cede;
    --color-row-hover:      #1a2541;
    --color-border:         #263149;
    --color-border-strong:  #3c4866;
    --color-border-hover:   #56648a;
    --color-border-accent:  #5b85e8;
    --color-text:           #e2e7f0;
    --color-text-muted:     #9ba6ba;
    --color-text-subtle:    #808ba1;
    --color-text-disabled:  #5d6880;
    --color-heading:        #f3f5fa;
    --color-link:           #86aaf6;
    --color-link-hover:     #a9c3fa;
    --color-primary:        #3566d6;
    --color-primary-hover:  #2b58c2;
    --color-primary-text:   #86aaf6;
    --color-primary-soft:   #1d2b4d;
    --color-primary-soft-text: #a9c3fa;
    --color-on-primary:     #ffffff;
    --color-focus:          #6f97f0;
    --color-focus-ring:     rgba(111, 151, 240, .35);
    --color-positive:       #4cc38a;
    --color-negative:       #f2706b;
    --color-danger:         #c4312e;
    --color-danger-hover:   #a82523;
    --color-danger-ring:    rgba(242, 112, 107, .3);
    --color-inverse:        #e2e7f0;
    --color-on-inverse:     #0d1424;
    --color-code-bg:        #0a0f1c;
    --color-code-text:      #dbe4f5;
    --color-code-inline:    #c9d6f2;
    --color-backdrop:       rgba(3, 6, 14, .7);

    /* Hinweise, Tags, HTTP-Methoden */
    --color-info-bg:        #142240;
    --color-info-border:    #24396a;
    --color-info-accent:    #5b85e8;
    --color-info-text:      #b7cbf7;
    --color-success-bg:     #11291e;
    --color-success-border: #1e4a34;
    --color-success-accent: #2fa86b;
    --color-success-text:   #7ddcaa;
    --color-warning-bg:     #2f2410;
    --color-warning-border: #5a4417;
    --color-warning-accent: #d99a1a;
    --color-warning-text:   #f3c66b;
    --color-warning-tint:   #1f1b14;
    --color-danger-bg:      #33161a;
    --color-danger-border:  #5c2529;
    --color-danger-accent:  #e0524e;
    --color-danger-text:    #ff9c97;
    --color-danger-tint:    #22151b;

    /* Diagramme */
    --color-chart-in:       #2fa86b;
    --color-chart-out:      #e0524e;
    --color-chart-bar:      #5b85e8;

    /* Kopf- und Fusszeile: dunkler als die Seite, damit sie sich absetzen */
    --color-chrome:         #0a1020;
    --color-chrome-raised:  #141c2f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow:    0 1px 3px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
}

/* Symbole aus data-URIs koennen keine Tokens nutzen und brauchen hellere Striche */
.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%239ba6ba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
}

.checklist li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234cc38a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* Farbschema-Menue: Mond statt Sonne */
.theme-icon--light {
    display: none;
}

.theme-icon--dark {
    display: block;
}