/*
 * Three themes (plans/schaft.md, ontwerpen in https://claude.ai/artifact/92PcqzuyzpK7CsziXsv4aE). Every screen uses
 * only these variables and the shared classes below; what really looks different per theme is under its own
 * [data-theme] block at the end. Text pairs are checked for 4.5:1 in ThemeContrastTests.
 */
:root, [data-theme="markt"] {
    --bg: #F6F9F3;
    --surface: #FFFFFF;
    --text: #1F2A1F;
    --muted: #4F604F;
    --line: #E1E8DC;
    --accent: #2F6B3A;        /* headings, active tab, selection */
    --accent-text: #FFFFFF;
    --cta: #C73A1E;           /* the one button that counts */
    --cta-text: #FFFFFF;
    --chip: #E3EEDD;
    --chip-text: #2F6B3A;
    --bar: #2F6B3A;
    --font-body: "Nunito", system-ui, sans-serif;
    --font-head: "Nunito", system-ui, sans-serif;
    --head-weight: 900;
    --head-size: 30px;
    --radius: 22px;
    --radius-button: 14px;
}

[data-theme="bistro"] {
    --bg: #1C1A17;
    --surface: #24211D;
    --text: #F3EDE1;
    --muted: #C9C0B0;
    --line: #3A3631;
    --accent: #E8B931;
    --accent-text: #1C1A17;
    --cta: #E8B931;
    --cta-text: #1C1A17;
    --chip: #3A3631;
    --chip-text: #F3EDE1;
    --bar: #1C1A17;
    --font-body: "Archivo", system-ui, sans-serif;
    --font-head: "Archivo Black", "Archivo", system-ui, sans-serif;
    --head-weight: 400;
    --head-size: 28px;
    --radius: 24px;
    --radius-button: 14px;
    color-scheme: dark;
}

[data-theme="schrift"] {
    --bg: #FFFFFF;
    --surface: #FFF6C9;
    --text: #22252B;
    --muted: #4A4F5C;
    --line: #DCE3F2;
    --accent: #2B4C9B;
    --accent-text: #FFFFFF;
    --cta: #2B4C9B;
    --cta-text: #FFFFFF;
    --chip: #FFF6C9;
    --chip-text: #22252B;
    --marker: #E2711D;
    --bar: #2B4C9B;
    --font-body: "Inter", system-ui, sans-serif;
    --font-head: "Caveat", cursive;
    --head-weight: 700;
    --head-size: 44px;
    --radius: 6px;
    --radius-button: 12px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); margin: 0; line-height: 1.1; }
h1 { font-size: var(--head-size); }
h2 { font-size: calc(var(--head-size) * 0.66); }

.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; font: 900 40px "Nunito", system-ui, sans-serif; color: #2F6B3A; }
.welcome { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 16px; text-align: center; }

/* Shell: header with logo, the page, a bottom bar with three tabs */
.shell { min-height: 100vh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.top { display: flex; align-items: center; justify-content: space-between; padding: max(16px, env(safe-area-inset-top)) 20px 8px; }
.top .me { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--chip); color: var(--chip-text); font-weight: 700; text-decoration: none; }
.page { flex: 1; padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.tabs { position: sticky; bottom: 0; display: flex; justify-content: space-around; padding: 8px 8px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--bg); }
.tabs a { min-width: 72px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 700; }
.tabs a.active { color: var(--accent); }
.tabs svg { width: 24px; height: 24px; }

.eyebrow { font-size: 14px; font-weight: 700; color: var(--muted); }
.muted { color: var(--muted); }

.card { background: var(--surface); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.button { min-height: 48px; padding: 0 18px; border-radius: var(--radius-button); border: 2px solid var(--line); background: transparent;
    color: var(--text); font: 700 16px var(--font-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.button.cta { background: var(--cta); border-color: var(--cta); color: var(--cta-text); }
.button:focus-visible, .tabs a:focus-visible, .theme-choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Theme picker: each choice previews itself in its own colors, whatever the current theme */
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-choice { border: 3px solid transparent; border-radius: 18px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    cursor: pointer; font: 700 15px var(--font-body); }
.theme-choice[aria-pressed="true"] { border-color: var(--accent); }
.theme-choice.markt { background: #EEF3EA; color: #1F2A1F; }
.theme-choice.bistro { background: #2A2723; color: #F3EDE1; }
.theme-choice.schrift { background: #FFFFFF; color: #22252B; box-shadow: inset 0 0 0 1px #DCE3F2; }

.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--line); }

/* ---- What looks really different per theme ---- */

/* Bistro: uppercase small labels and tabs, the first suggestion as a big yellow block */
[data-theme="bistro"] .eyebrow, [data-theme="bistro"] .tabs a { text-transform: uppercase; letter-spacing: 0.1em; }
[data-theme="bistro"] .card.hero { background: var(--accent); color: var(--accent-text); }
[data-theme="bistro"] .card.hero .muted { color: #3A3328; }
[data-theme="bistro"] .card.hero .button.cta { background: #1C1A17; border-color: #1C1A17; color: #F3EDE1; }

/* Schrift: tilted notes, a dashed tab bar, a ruled list */
[data-theme="schrift"] .card { box-shadow: 0 6px 14px rgba(34, 37, 43, 0.12); transform: rotate(-1deg); }
[data-theme="schrift"] .card:nth-of-type(2n) { transform: rotate(0.8deg); background: #E4F0FF; }
[data-theme="schrift"] .card:nth-of-type(3n) { transform: rotate(-0.5deg); background: #E5F4E6; }
[data-theme="schrift"] .tabs { border-top-style: dashed; }
[data-theme="schrift"] .tabs a { font: 600 22px "Caveat", cursive; }
[data-theme="schrift"] .tabs a.active { font-weight: 700; }
[data-theme="schrift"] .tabs svg { display: none; }
[data-theme="schrift"] h2 { font-size: 30px; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    [data-theme="schrift"] .card, [data-theme="schrift"] .card:nth-of-type(n) { transform: none; }
}

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 20px; background: #FFF6C9; color: #22252B; z-index: 1000; }
#blazor-error-ui .dismiss { position: absolute; right: 12px; top: 6px; border: none; background: none; font-size: 22px; cursor: pointer; }