/* ── Stubs Farbsystem ─────────────────────────────────────────────────────
   Alle CSS-Custom-Properties (Farben + Gradienten) und .color-x-Klassen.
   Wird als erste Stylesheet-Ressource geladen.
──────────────────────────────────────────────────────────────────────── */

:root {

    /* ── Basisfarben ── */
    --cream:         #f5f0e8;
    --dark:          #0f0d08;
    --green-dark:    #1e2e1a;
    --green-mid:     #3d5c3a;
    --green-light:   #7aaa5a;
    --amber:         #c4852a;
    --amber-light:   #e8a94a;
    --stone:         #8b7355;

    /* ── Funktionale Farben ── */
    --connect:  linear-gradient(90deg, #e86a5a, #7651a8);
    --selfcare: #00b8b8;
    --growing:  #2e8b57;
    --wellbeing:#c9828d;
    --ban:      #ff9f1c;
    --ad:       #7cb342;
    --lock:     #ffd166;
    --access: linear-gradient(
        135deg,
        #CF7280,
        #E9C96A,
        #E8E8E8,
        #6A9EC9,
        #7DC17E
    );

    /* ── Neurodivergent Pride Flag — Infinity-Symbol ── */
    --neurodivergent-gradient: linear-gradient(
        90deg,
        #E85CA0,
        #7950A8,
        #4AAAE8,
        #45C8C0,
        #7EC878,
        #ECC830,
        #F08030
    );

    /* Linke Hälfte → Autismus */
    --autism-gradient: linear-gradient(
        90deg,
        #E85CA0,
        #7950A8,
        #4AAAE8,
        #45C8C0
    );

    /* Rechte Hälfte → Hochsensibel */
    --hochsensibel-gradient: linear-gradient(
        90deg,
        #45C8C0,
        #7EC878,
        #ECC830,
        #F08030
    );

    /* ── ADHD Pride Flag — Schmetterling als Gradient ── */
    --adhd-gradient: linear-gradient(
        90deg,
        #FE0000,
        #FE5C00,
        #FFD901,
        #FFFF01,
        #CFE701,
        #9ECF01,
        #008001,
        #1A00F1,
        #0000FE,
        #5500D5,
        #82009C
    );

    /* ── Farb-Palette (50 Farben) ── */

    /* Rot / Orange */
    --kirschrot:          #C62828;  /*  1 */
    --korallrot:          #E85D5D;  /*  2 */
    --koralle:            #FF6F61;  /*  3 */
    --lachs:              #FA8072;  /*  4 */
    --terrakotta:         #C96A4A;  /*  5 */
    --rostorange:         #C65D32;  /*  6 */
    --orange:             #F28C28;  /*  7 */
    --mandarine:          #FF9F1C;  /*  8 */
    --apricot:            #F4A261;  /*  9 */
    --pfirsich:           #FFB38A;  /* 10 */

    /* Gelb */
    --senfgelb:           #D4A017;  /* 11 */
    --goldgelb:           #E6B422;  /* 12 */
    --sonnengelb:         #F4C430;  /* 13 */
    --warmgelb:           #FFD166;  /* 14 */
    --zitronengelb:       #F5E642;  /* 15 */

    /* Grün */
    --limettengruen:      #9ACD32;  /* 16 */
    --apfelgruen:         #7CB342;  /* 17 */
    --grasgruen:          #43A047;  /* 18 */
    --smaragdgruen:       #2E8B57;  /* 19 */
    --waldgruen:          #2D6A4F;  /* 20 */
    --salbeigruen:        #8FAF88;  /* 21 */
    --mintgruen:          #72C9A5;  /* 22 */
    --hell-mint:          #A8E6CF;  /* 23 */
    --aquamarin:          #5ECFB5;  /* 24 */

    /* Türkis / Petrol */
    --tuerkis:            #40E0D0;  /* 25 */
    --tuerkis-kraeftig:   #00B8B8;  /* 26 */
    --tuerkis-dunkel:     #008C8C;  /* 27 */
    --petrol:             #287477;  /* 28 */
    --petrol-dunkel:      #205E61;  /* 29 */

    /* Blau */
    --cyanblau:           #20BFCF;  /* 30 */
    --himmelblau:         #65B8E8;  /* 31 */
    --azurblau:           #328CCB;  /* 32 */
    --koenigsblau:        #4169E1;  /* 33 */
    --mittelblau:         #3F6DB5;  /* 34 */
    --marineblau:         #294C73;  /* 35 */
    --indigo:             #4B5AA7;  /* 36 */
    --lavendelblau:       #7D83C5;  /* 37 */

    /* Lila / Pink */
    --violett:            #7651A8;  /* 38 */
    --lila:               #8E5BA6;  /* 39 */
    --pflaume:            #744B78;  /* 40 */
    --flieder:            #A98BC3;  /* 41 */
    --fuchsia:            #C13C8A;  /* 42 */
    --magenta:            #D13C8C;  /* 43 */

    /* Rosa */
    --altrosa:            #C9828D;  /* 44 */
    --rose:               #D99A9E;  /* 45 */
    --puderrosa:          #E8B4B8;  /* 46 */

    /* Braun / Neutral */
    --schokobraun:        #795548;  /* 47 */
    --karamell:           #B77945;  /* 48 */
    --sand:               #D6C2A1;  /* 49 */
    --anthrazit:          #424B54;  /* 50 */
}

/* ── Farb-Klassen: Volltonfarben ──────────────────────────────────────── */
.color-inherit {
    color: inherit !important;
}

.color-cream {
    color: var(--cream);
}

/* Rot / Orange */
.color-kirschrot        { color: var(--kirschrot); }
.color-korallrot        { color: var(--korallrot); }
.color-koralle          { color: var(--koralle); }
.color-lachs            { color: var(--lachs); }
.color-terrakotta       { color: var(--terrakotta); }
.color-rostorange       { color: var(--rostorange); }
.color-orange           { color: var(--orange); }
.color-mandarine        { color: var(--mandarine); }
.color-apricot          { color: var(--apricot); }
.color-pfirsich         { color: var(--pfirsich); }

/* Gelb */
.color-senfgelb         { color: var(--senfgelb); }
.color-goldgelb         { color: var(--goldgelb); }
.color-sonnengelb       { color: var(--sonnengelb); }
.color-warmgelb         { color: var(--warmgelb); }
.color-zitronengelb     { color: var(--zitronengelb); }

/* Grün */
.color-limettengruen    { color: var(--limettengruen); }
.color-apfelgruen       { color: var(--apfelgruen); }
.color-grasgruen        { color: var(--grasgruen); }
.color-smaragdgruen     { color: var(--smaragdgruen); }
.color-waldgruen        { color: var(--waldgruen); }
.color-salbeigruen      { color: var(--salbeigruen); }
.color-salbei           { color: var(--salbeigruen); }
.color-mintgruen        { color: var(--mintgruen); }
.color-hellmint         { color: var(--hell-mint); }
.color-aquamarin        { color: var(--aquamarin); }

/* Türkis / Petrol */
.color-tuerkis          { color: var(--tuerkis); }
.color-tuerkis-kraeftig { color: var(--tuerkis-kraeftig); }
.color-tuerkis-dunkel   { color: var(--tuerkis-dunkel); }
.color-petrol           { color: var(--petrol); }
.color-dunkelpetrol     { color: var(--petrol-dunkel); }

/* Blau */
.color-cyanblau         { color: var(--cyanblau); }
.color-himmelblau       { color: var(--himmelblau); }
.color-azurblau         { color: var(--azurblau); }
.color-koenigsblau      { color: var(--koenigsblau); }
.color-mittelblau       { color: var(--mittelblau); }
.color-marineblau       { color: var(--marineblau); }
.color-indigo           { color: var(--indigo); }
.color-lavendelblau     { color: var(--lavendelblau); }

/* Lila / Pink */
.color-violett          { color: var(--violett); }
.color-lila             { color: var(--lila); }
.color-pflaume          { color: var(--pflaume); }
.color-flieder          { color: var(--flieder); }
.color-fuchsia          { color: var(--fuchsia); }
.color-magenta          { color: var(--magenta); }

/* Rosa */
.color-altrosa          { color: var(--altrosa); }
.color-rose             { color: var(--rose); }
.color-puderrosa        { color: var(--puderrosa); }

/* Braun / Neutral */
.color-schokobraun      { color: var(--schokobraun); }
.color-karamell         { color: var(--karamell); }
.color-sand             { color: var(--sand); }
.color-anthrazit        { color: var(--anthrazit); }

/* Funktionale Aliase */
.color-safety           { color: var(--green-light); }
.color-selfcare         { color: var(--tuerkis-kraeftig); }
.color-growing          { color: var(--smaragdgruen); }
.color-wellbeing        { color: var(--altrosa); }
.color-ban              { color: var(--mandarine); }
.color-ad               { color: var(--apfelgruen); }
.color-lock             { color: var(--warmgelb); }

/* ── Farb-Klassen: Gradienten ─────────────────────────────────────────── */

.color-connect,
.color-hand {
    background: var(--connect);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-neurodivergent {
    background: var(--neurodivergent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-autism {
    background: var(--autism-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-hochsensibel {
    background: var(--hochsensibel-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-adhd {
    background: var(--adhd-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-access {
    background: var(--access);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-vision {
    background: linear-gradient(45deg, var(--lachs), var(--salbeigruen), var(--lavendelblau), var(--altrosa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Hochkontrast-Overrides (html.high-contrast) ──────────────────────────
   Alle .color-x → Weiß.
   Ausnahme: Gelbtöne → #FFE000, Grüntöne → #44DD00 (für Unterscheidbarkeit).
──────────────────────────────────────────────────────────────────────────── */

html.high-contrast [class*="color-"] {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Gelb */
html.high-contrast .color-senfgelb,
html.high-contrast .color-goldgelb,
html.high-contrast .color-sonnengelb,
html.high-contrast .color-warmgelb,
html.high-contrast .color-zitronengelb,
html.high-contrast .color-lock,
html.high-contrast .color-ban,
html.high-contrast .color-mandarine,
html.high-contrast .color-apricot,
html.high-contrast .color-pfirsich {
    color: #FFE000 !important;
    -webkit-text-fill-color: #FFE000 !important;
}

/* Grün */
html.high-contrast .color-limettengruen,
html.high-contrast .color-apfelgruen,
html.high-contrast .color-grasgruen,
html.high-contrast .color-smaragdgruen,
html.high-contrast .color-waldgruen,
html.high-contrast .color-salbeigruen,
html.high-contrast .color-salbei,
html.high-contrast .color-mintgruen,
html.high-contrast .color-hellmint,
html.high-contrast .color-aquamarin,
html.high-contrast .color-safety,
html.high-contrast .color-growing,
html.high-contrast .color-ad {
    color: #44DD00 !important;
    -webkit-text-fill-color: #44DD00 !important;
}

/* Badges */
html.high-contrast .badge.red {
    background: var(--kirschrot) !important;
    color: #FFFFFF !important;
    font-weight: bolder;
    font-size: 1.5rem;
}
html.high-contrast .badge.yellow {
    background: var(--zitronengelb) !important;
    color: #000 !important;
}
html.high-contrast .badge.gray {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}