/* public/css/theme-tokens.css
   - Tokens only (NO base styles)
   - Default = Dark ("normal")
*/

:root{
    --bg: #070B14;
    --panel: #0B1220;
    --card: rgba(255,255,255,0.06);
    --card2: rgba(255,255,255,0.09);
    --border: rgba(255,255,255,0.10);

    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.68);

    --primary: #2F6BFF;
    --primary-weak: rgba(47,107,255,.14);

    --danger: #ef4444;
    --danger-weak: rgba(239,68,68,.14);
    --success: #22c55e;
    --success-weak: rgba(34,197,94,.14);
    --warn: #f59e0b;
    --warn-weak: rgba(245,158,11,.16);

    --shadow: 0 18px 55px rgba(0,0,0,0.60);
    --shadow-sm: 0 10px 28px rgba(0,0,0,0.38);

    --radius: 18px;
    --radius-sm: 12px;
    --ring: 0 0 0 4px rgba(47,107,255,0.22);
    --on-primary: #ffffff;          /* Text auf Primary-Flächen */
    --shadow-elev: rgba(0,0,0,0.22);/* neutrales Shadow-Alpha für Hovers */
    --primary-strong: #1d4ed8;      /* (optional) dunklere Primary-Stufe */
    --icon-tile: #ffffff;                 /* helle Kachel im Dark */
    --icon-tile-border: rgba(255,255,255,0.12);
    --icon-filter: none;
    --a11y-panel: var(--panel);
    --a11y-border: var(--border);
    --a11y-text: var(--text);
    --a11y-muted: var(--muted);
    --a11y-accent: var(--primary);
    --a11y-soft: var(--primary-weak);
    --a11y-fab-bg: linear-gradient(135deg, #34508d, #34508d);
    --a11y-fab-shadow: var(--primary-weak);

    /* Widget button background */

    color-scheme: dark;
}

/* a11y widget: Light preset */
html[data-contrast="light"]{
    --bg: #f6f7fb;
    --panel: #ffffff;
    --card: #ffffff;
    --card2: #f2f4fb;
    --border: #e6e8ef;
    --icon-tile: var(--card2);            /* im Light keine pure white Kachel */
    --icon-tile-border: var(--border);
    --icon-filter: none;

    --text: rgba(15,23,42,0.92);
    --muted: rgba(0, 0, 0, 0.62);

    --primary: #2F6BFF;
    --primary-weak: rgba(47,107,255,.12);

    --danger: #dc2626;
    --danger-weak: rgba(220,38,38,.12);
    --success: #16a34a;
    --success-weak: rgba(22,163,74,.12);
    --warn: #f59e0b;
    --warn-weak: rgba(245,158,11,.14);

    --shadow: 0 10px 30px rgba(18,24,38,.08);
    --shadow-sm: 0 6px 18px rgba(18,24,38,.08);

    --ring: 0 0 0 4px rgba(47,107,255,0.18);
    --on-primary: #ffffff;          /* Text auf Primary-Flächen */
    --shadow-elev: rgba(0,0,0,0.22);/* neutrales Shadow-Alpha für Hovers */
    --primary-strong: #1d4ed8;      /* (optional) dunklere Primary-Stufe */


    color-scheme: light;
}

/* a11y widget: stronger contrast variants (dark palette) */
html[data-contrast="medium"]{
    --border: rgba(255,255,255,0.16);
    --card: rgba(255,255,255,0.08);
    --card2: rgba(255,255,255,0.12);
    --muted: rgba(255,255,255,0.74);
}
/* A11Y: HIGH CONTRAST (extreme) — black/yellow */
html[data-contrast="high"]{
    /* Surfaces */
    --a11y-panel: var(--bg);
    --a11y-border: var(--border);
    --a11y-text: var(--text);
    --a11y-muted: var(--muted);
    --a11y-accent: var(--primary);

    --a11y-fab-bg: var(--bg);
    --a11y-fab-shadow: transparent;
    --a11y-soft: transparent;
    --bg: #000000;
    --panel: #000000;
    --card: #000000;
    --card2: #000000;
    --icon-tile: #FFD400;                 /* gelb, sehr gut sichtbar */
    --icon-tile-border: #FFD400;
    --icon-filter: none;
    /* Text */
    --text: #FFD400;          /* bright yellow */
    --muted: #FFE766;         /* softer yellow, still readable */

    /* Borders / outlines */
    --border: #FFD400;
    --ring: 0 0 0 4px #FFD400;

    /* Primary/accent */
    --primary: #FFD400;
    --primary-weak: rgba(255, 212, 0, 0.22);

    /* Status colors (keep semantic but still HC-friendly) */
    --success: #00FF66;
    --success-weak: rgba(0, 255, 102, 0.22);

    --danger: #FF3B3B;
    --danger-weak: rgba(255, 59, 59, 0.22);

    --warn: #FFD400;
    --warn-weak: rgba(255, 212, 0, 0.22);

    /* Shadows should not reduce contrast */
    --shadow: none;
    --shadow-sm: none;
    --on-primary: #000000; /* Text auf gelb = schwarz */
    --shadow-elev: transparent;
    --primary-strong: var(--primary);

    color-scheme: light;
}


/* Optional: make interactive elements unmistakable in HIGH mode */
html[data-contrast="high"] a,
html[data-contrast="high"] .link-btn{
    color: #FFD400;
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
}

html[data-contrast="high"] .btn{
    background: #000;
    color: #FFD400;
    border-color: #FFD400;
}

html[data-contrast="high"] .btn:hover{
    filter: none;
    border-color: #FFF2A6;
}

html[data-contrast="high"] input,
html[data-contrast="high"] select,
html[data-contrast="high"] textarea{
    background: #000;
    color: #FFD400;
    border-color: #FFD400;
}

/* Remove decorative gradients completely in HIGH mode */
html[data-contrast="high"] .filter-card,
html[data-contrast="high"] .list-card,
html[data-contrast="high"] .modal-card,
html[data-contrast="high"] .toolbar,
html[data-contrast="high"] .panel,
html[data-contrast="high"] .return-item{
    background: #000 !important;
    box-shadow: none !important;
}
html[data-contrast="high"] .info-box__image{
    background: var(--bg);
    border-color: var(--border);
}