/* ══════════════════════════════════════════════
   THEMES — konteringsmallar.se
   6 art-movement themes, each fully self-contained
   ══════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   1. NORDISK MINIMALISM
   Gallery-like silence. Extreme whitespace.
   ═══════════════════════════════════════════ */
[data-theme="nordic"] {
    --background: #f7f5f0;
    --foreground: #2c2c2c;
    --primary: #2d5a3d;
    --primary-foreground: #fff;
    --card: #fff;
    --border: #e0dbd4;
    --muted: #edeae3;
    --muted-foreground: #8a8578;
    --input: #ddd8cf;
    --ring: #2d5a3d;
    --accent: #edeae3;
    --radius-medium: 0.5rem;
    --shadow-small: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="nordic"] body {
    font-family: "DM Sans", system-ui, sans-serif;
}
[data-theme="nordic"] :is(h1,h2,h3,h4,h5,h6) {
    font-family: "DM Serif Display", "Iowan Old Style", serif;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Cards: white, 1px border, subtle shadow, gentle hover lift */
[data-theme="nordic"] .seed-list li {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-small);
}
[data-theme="nordic"] .seed-list li:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: var(--primary);
    transform: translateY(-2px);
}

/* Table: minimal — no visible borders, just subtle bottom-lines */
[data-theme="nordic"] .recipe-table thead {
    border-bottom: 2px solid var(--border);
}
[data-theme="nordic"] .recipe-table th {
    color: var(--muted-foreground);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
[data-theme="nordic"] .recipe-table tbody tr {
    border-bottom: 1px solid var(--border);
}
[data-theme="nordic"] .recipe-table tbody tr:last-child {
    border-bottom: none;
}
[data-theme="nordic"] .recipe-table tbody tr:hover {
    background: #f2efe8;
}

/* CTA card */
[data-theme="nordic"] .cta-link {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-small);
}
[data-theme="nordic"] .cta-link:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: var(--primary);
    transform: translateY(-2px);
}

/* Nav */
[data-theme="nordic"] .site-nav {
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* FAQ cards: match seed-list card style */
[data-theme="nordic"] .faq-list details {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-small);
}

/* Footer: hairline */
[data-theme="nordic"] .site-footer {
    border-top: 1px solid var(--border);
}


/* ═══════════════════════════════════════════
   2. BAUHAUS
   Geometric severity. Primary colors. Function is form.
   ═══════════════════════════════════════════ */
[data-theme="bauhaus"] {
    --background: #fff;
    --foreground: #111;
    --primary: #d42828;
    --primary-foreground: #fff;
    --card: #fff;
    --border: #111;
    --muted: #f2f2f2;
    --muted-foreground: #555;
    --input: #999;
    --ring: #d42828;
    --accent: #f2f2f2;
    --radius-medium: 0;
}
[data-theme="bauhaus"] body {
    font-family: "Work Sans", system-ui, sans-serif;
}
[data-theme="bauhaus"] :is(h1,h2,h3,h4,h5,h6) {
    font-family: "Work Sans", system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Cards: 3px black border, rotating R/B/Y left accent, yellow hover */
[data-theme="bauhaus"] .seed-list li {
    background: var(--card);
    border: 3px solid #111;
}
[data-theme="bauhaus"] .seed-list li:nth-child(3n+1) { border-left: 10px solid #f0c808; }
[data-theme="bauhaus"] .seed-list li:nth-child(3n+2) { border-left: 10px solid #1a3e8a; }
[data-theme="bauhaus"] .seed-list li:nth-child(3n+3) { border-left: 10px solid #d42828; }
[data-theme="bauhaus"] .seed-list li:hover { background: #f0c808; }

/* CTA card */
[data-theme="bauhaus"] .cta-link {
    background: var(--card);
    border: 3px solid #111;
    border-left: 10px solid #d42828;
}
[data-theme="bauhaus"] .cta-link:hover { background: #f0c808; }

/* Table: thick borders, black header with white text */
[data-theme="bauhaus"] .recipe-table { border: 3px solid #111; }
[data-theme="bauhaus"] .recipe-table thead { background: #111; }
[data-theme="bauhaus"] .recipe-table th {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
[data-theme="bauhaus"] .recipe-table td { border: 2px solid #111; }

/* Buttons: no radius, thick border */
[data-theme="bauhaus"] :is(button, .button, a.button) {
    border-radius: 0;
    border: 2px solid #111;
}
[data-theme="bauhaus"] .outline { border: 2px solid #111; }

/* FAQ cards */
[data-theme="bauhaus"] .faq-list details {
    background: var(--card);
    border: 3px solid #111;
}

/* Footer */
[data-theme="bauhaus"] .site-footer { border-top: 4px solid #111; }

/* No shadows, no radius — geometric purity */
[data-theme="bauhaus"] .seed-list li,
[data-theme="bauhaus"] input,
[data-theme="bauhaus"] textarea,
[data-theme="bauhaus"] select {
    border-radius: 0;
}


/* ═══════════════════════════════════════════
   3. POP ART
   Comic book explosion. Halftone. Loud.
   ═══════════════════════════════════════════ */
[data-theme="popart"] {
    --background: #fafafa;
    --foreground: #111;
    --primary: #FF1493;
    --primary-foreground: #fff;
    --card: #fff;
    --border: #111;
    --muted: #f0f0f0;
    --muted-foreground: #333;
    --input: #111;
    --ring: #FF1493;
    --accent: #f0f0f0;
    --radius-medium: 0;
}
[data-theme="popart"] body {
    font-family: system-ui, -apple-system, sans-serif;
    background-image: radial-gradient(circle 1.2px, #ddd 100%, transparent 100%);
    background-size: 10px 10px;
}
[data-theme="popart"] :is(h1,h2,h3,h4,h5,h6) {
    font-family: "Bangers", cursive;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Cards: 3px border, offset drop shadow, hover grows shadow */
[data-theme="popart"] .seed-list li {
    border: 3px solid #111;
    box-shadow: 5px 5px 0 #111;
    background: #fff;
    border-radius: 0;
}
[data-theme="popart"] .seed-list li:nth-child(even) {
    border-color: #FF1493;
    box-shadow: 5px 5px 0 #FF1493;
}
[data-theme="popart"] .seed-list li:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 #111;
}
[data-theme="popart"] .seed-list li:nth-child(even):hover {
    box-shadow: 8px 8px 0 #FF1493;
}

/* CTA card */
[data-theme="popart"] .cta-link {
    border: 3px solid #111;
    box-shadow: 5px 5px 0 #FF1493;
    background: #fff;
}
[data-theme="popart"] .cta-link:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 #FF1493;
}

/* Table: thick border, pink header, yellow odd rows */
[data-theme="popart"] .recipe-table { border: 4px solid #111; }
[data-theme="popart"] .recipe-table thead { background: #FF1493; }
[data-theme="popart"] .recipe-table th {
    color: #fff;
    font-family: "Bangers", cursive;
    font-size: 1.1em;
    letter-spacing: 0.06em;
}
[data-theme="popart"] .recipe-table td { border: 2px solid #111; }
[data-theme="popart"] .recipe-table tbody tr:nth-child(odd) { background: #fff8e0; }

/* Buttons */
[data-theme="popart"] :is(button, .button, a.button) {
    border: 3px solid #111;
    border-radius: 0;
    box-shadow: 3px 3px 0 #111;
    font-family: "Bangers", cursive;
    letter-spacing: 0.04em;
}
[data-theme="popart"] :is(button, .button, a.button):hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #111;
    opacity: 1;
}
[data-theme="popart"] .outline {
    background: transparent; color: #111;
    border: 3px solid #111;
}

/* FAQ cards */
[data-theme="popart"] .faq-list details {
    border: 3px solid #111;
    box-shadow: 5px 5px 0 #111;
    background: #fff;
}
[data-theme="popart"] .faq-list details:nth-child(even) {
    border-color: #FF1493;
    box-shadow: 5px 5px 0 #FF1493;
}

/* Footer: cyan background */
[data-theme="popart"] .site-footer {
    border-top: 4px solid #111;
    background: #00BFFF;
    color: #fff;
}
[data-theme="popart"] .site-footer a { color: #fff; }

/* Form inputs */
[data-theme="popart"] input,
[data-theme="popart"] textarea,
[data-theme="popart"] select {
    border: 2px solid #111;
    border-radius: 0;
}


/* ═══════════════════════════════════════════
   4. DE STIJL
   Mondrian painting as a website. Thick black grid.
   ═══════════════════════════════════════════ */
[data-theme="destijl"] {
    --background: #fff;
    --foreground: #111;
    --primary: #d42828;
    --primary-foreground: #fff;
    --card: #fff;
    --border: #111;
    --muted: #f5f5f5;
    --muted-foreground: #555;
    --input: #111;
    --ring: #1a3e8a;
    --accent: #f5f5f5;
    --radius-medium: 0;
}
[data-theme="destijl"] body {
    font-family: "Archivo", system-ui, sans-serif;
}
[data-theme="destijl"] :is(h1,h2,h3,h4,h5,h6) {
    font-family: "Archivo Black", "Archivo", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* h1 gets yellow background fill */
[data-theme="destijl"] h1 {
    display: inline-block;
    background: #f0c808;
    padding: 0.1em 0.4em;
}

/* Cards: 4px black border, 14px colored left accent rotating R/B/Y/black */
[data-theme="destijl"] .seed-list li {
    border: 4px solid #111;
    background: var(--card);
}
[data-theme="destijl"] .seed-list li:nth-child(5n+1) { border-left: 14px solid #d42828; }
[data-theme="destijl"] .seed-list li:nth-child(5n+2) { border-left: 14px solid #1a3e8a; }
[data-theme="destijl"] .seed-list li:nth-child(5n+3) { border-left: 14px solid #f0c808; }
[data-theme="destijl"] .seed-list li:nth-child(5n+4) { border-left: 14px solid #111; }
[data-theme="destijl"] .seed-list li:nth-child(5n+5) { border-left: 14px solid #d42828; }
[data-theme="destijl"] .seed-list li:hover { background: #f0c808; }

/* CTA card */
[data-theme="destijl"] .cta-link {
    border: 4px solid #111;
    border-left: 14px solid #1a3e8a;
    background: var(--card);
}
[data-theme="destijl"] .cta-link:hover { background: #f0c808; }

/* Table: 4px borders everywhere, blue header */
[data-theme="destijl"] .recipe-table { border: 4px solid #111; }
[data-theme="destijl"] .recipe-table thead { background: #1a3e8a; }
[data-theme="destijl"] .recipe-table th {
    color: #fff;
    border: 3px solid #111;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
[data-theme="destijl"] .recipe-table td { border: 3px solid #111; }

/* Buttons */
[data-theme="destijl"] :is(button, .button, a.button) {
    border: 3px solid #111;
    border-radius: 0;
}
[data-theme="destijl"] .outline { border: 3px solid #111; }

/* FAQ cards */
[data-theme="destijl"] .faq-list details {
    border: 4px solid #111;
    background: var(--card);
}

/* Footer */
[data-theme="destijl"] .site-footer { border-top: 6px solid #111; }

/* No radius, no shadows — only black lines and primary fills */
[data-theme="destijl"] input,
[data-theme="destijl"] textarea,
[data-theme="destijl"] select {
    border: 2px solid #111;
    border-radius: 0;
}


/* ═══════════════════════════════════════════
   5. MEMPHIS
   80s postmodern party. Playful shapes.
   ═══════════════════════════════════════════ */
[data-theme="memphis"] {
    --background: #fff0f5;
    --foreground: #2d1b4e;
    --primary: #ff2d78;
    --primary-foreground: #fff;
    --card: #fff;
    --border: #2d1b4e;
    --muted: #fce4ee;
    --muted-foreground: #7a5f92;
    --input: #7a5f92;
    --ring: #ff2d78;
    --accent: #fce4ee;
    --radius-medium: 0.75rem;
}
[data-theme="memphis"] body {
    font-family: "Nunito", system-ui, sans-serif;
    /* Confetti dot pattern */
    background-image:
        radial-gradient(circle 2.5px, rgba(255,45,120,0.09) 100%, transparent 100%),
        radial-gradient(circle 2px, rgba(45,94,255,0.08) 100%, transparent 100%),
        radial-gradient(circle 1.5px, rgba(255,224,0,0.09) 100%, transparent 100%);
    background-size: 35px 35px, 28px 28px, 42px 42px;
    background-position: 0 0, 14px 14px, 7px 21px;
}
[data-theme="memphis"] :is(h1,h2,h3,h4,h5,h6) {
    font-family: "Rubik", sans-serif;
    font-weight: 700;
}

/* Colorful headings */
[data-theme="memphis"] h1 { color: #ff2d78; }
[data-theme="memphis"] h2 { color: #2d5eff; }

/* Cards: rounded, colored offset shadows rotating pink/turquoise/yellow */
[data-theme="memphis"] .seed-list li {
    border: 2.5px solid #2d1b4e;
    background: #fff;
    border-radius: 14px;
}
[data-theme="memphis"] .seed-list li:nth-child(3n+1) { box-shadow: 4px 4px 0 #ff2d78; }
[data-theme="memphis"] .seed-list li:nth-child(3n+2) { box-shadow: 4px 4px 0 #00d4aa; }
[data-theme="memphis"] .seed-list li:nth-child(3n+3) { box-shadow: 4px 4px 0 #ffe000; }
[data-theme="memphis"] .seed-list li:hover {
    transform: translate(-2px, -2px);
}
[data-theme="memphis"] .seed-list li:nth-child(3n+1):hover { box-shadow: 6px 6px 0 #ff2d78; }
[data-theme="memphis"] .seed-list li:nth-child(3n+2):hover { box-shadow: 6px 6px 0 #00d4aa; }
[data-theme="memphis"] .seed-list li:nth-child(3n+3):hover { box-shadow: 6px 6px 0 #ffe000; }

/* CTA card */
[data-theme="memphis"] .cta-link {
    border: 2.5px solid #2d1b4e;
    background: #fff;
    border-radius: 14px;
    box-shadow: 4px 4px 0 #00d4aa;
}
[data-theme="memphis"] .cta-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #00d4aa;
}

/* Table: rounded corners, pink header, pastel stripes */
[data-theme="memphis"] .recipe-table {
    border: 2.5px solid #2d1b4e;
    border-radius: 14px;
    overflow: hidden;
}
[data-theme="memphis"] .recipe-table thead { background: #ff2d78; }
[data-theme="memphis"] .recipe-table th {
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-weight: 700;
}
[data-theme="memphis"] .recipe-table tbody tr:nth-child(odd) { background: #fef6fa; }

/* Buttons: rounded, purple border */
[data-theme="memphis"] :is(button, .button, a.button) {
    border: 2px solid #2d1b4e;
    border-radius: 10px;
    box-shadow: 3px 3px 0 #2d1b4e;
}
[data-theme="memphis"] :is(button, .button, a.button):hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #2d1b4e;
    opacity: 1;
}
[data-theme="memphis"] .outline {
    background: transparent; color: var(--foreground);
    border: 2px solid #2d1b4e;
}

/* FAQ cards */
[data-theme="memphis"] .faq-list details {
    border: 2.5px solid #2d1b4e;
    background: #fff;
    border-radius: 14px;
}
[data-theme="memphis"] .faq-list details:nth-child(3n+1) { box-shadow: 4px 4px 0 #ff2d78; }
[data-theme="memphis"] .faq-list details:nth-child(3n+2) { box-shadow: 4px 4px 0 #00d4aa; }
[data-theme="memphis"] .faq-list details:nth-child(3n+3) { box-shadow: 4px 4px 0 #ffe000; }

/* Footer: dashed border */
[data-theme="memphis"] .site-footer { border-top: 3px dashed #2d1b4e; }

/* Form inputs */
[data-theme="memphis"] input,
[data-theme="memphis"] textarea,
[data-theme="memphis"] select {
    border: 2px solid #2d1b4e;
    border-radius: 10px;
}


/* ═══════════════════════════════════════════
   6. FAUVISM
   Wild expressionism. Matisse energy.
   Colors that "shouldn't" go together but do.
   ═══════════════════════════════════════════ */
[data-theme="fauvism"] {
    --background: #fff8e7;
    --foreground: #1a1a2e;
    --primary: #ff6b2b;
    --primary-foreground: #fff;
    --card: #fff;
    --border: #1a1a2e;
    --muted: #fff0d0;
    --muted-foreground: #666;
    --input: #666;
    --ring: #0055ff;
    --accent: #fff0d0;
    --radius-medium: 0.5rem;
}
[data-theme="fauvism"] body {
    font-family: "Fredoka", system-ui, sans-serif;
}
[data-theme="fauvism"] :is(h1,h2,h3,h4,h5,h6) {
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
}

/* Bold heading colors */
[data-theme="fauvism"] h1 { color: #ff6b2b; }
[data-theme="fauvism"] h2 { color: #0055ff; }

/* Cards: colored left accent + matching offset shadow, hover rotates */
[data-theme="fauvism"] .seed-list li {
    border: 3px solid #1a1a2e;
    background: #fff;
    border-radius: 0.5rem;
}
[data-theme="fauvism"] .seed-list li:nth-child(4n+1) {
    border-left: 10px solid #ff6b2b;
    box-shadow: 4px 4px 0 #ff6b2b;
}
[data-theme="fauvism"] .seed-list li:nth-child(4n+2) {
    border-left: 10px solid #0055ff;
    box-shadow: 4px 4px 0 #0055ff;
}
[data-theme="fauvism"] .seed-list li:nth-child(4n+3) {
    border-left: 10px solid #00cc44;
    box-shadow: 4px 4px 0 #00cc44;
}
[data-theme="fauvism"] .seed-list li:nth-child(4n+4) {
    border-left: 10px solid #ffd700;
    box-shadow: 4px 4px 0 #ffd700;
}
[data-theme="fauvism"] .seed-list li:hover {
    transform: translate(-2px, -2px) rotate(-1deg);
}
[data-theme="fauvism"] .seed-list li:nth-child(4n+1):hover { box-shadow: 6px 6px 0 #ff6b2b; }
[data-theme="fauvism"] .seed-list li:nth-child(4n+2):hover { box-shadow: 6px 6px 0 #0055ff; }
[data-theme="fauvism"] .seed-list li:nth-child(4n+3):hover { box-shadow: 6px 6px 0 #00cc44; }
[data-theme="fauvism"] .seed-list li:nth-child(4n+4):hover { box-shadow: 6px 6px 0 #ffd700; }

/* CTA card */
[data-theme="fauvism"] .cta-link {
    border: 3px solid #1a1a2e;
    border-left: 10px solid #0055ff;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 4px 4px 0 #0055ff;
}
[data-theme="fauvism"] .cta-link:hover {
    transform: translate(-2px, -2px) rotate(-1deg);
    box-shadow: 6px 6px 0 #0055ff;
}

/* Table: thick border, blue header, cream stripes, pink hover */
[data-theme="fauvism"] .recipe-table { border: 4px solid #1a1a2e; }
[data-theme="fauvism"] .recipe-table thead { background: #0055ff; }
[data-theme="fauvism"] .recipe-table th {
    color: #fff;
    font-family: "Lilita One", sans-serif;
    letter-spacing: 0.03em;
}
[data-theme="fauvism"] .recipe-table tbody tr:nth-child(odd) { background: #fff5e0; }
[data-theme="fauvism"] .recipe-table tbody tr:hover { background: #ffe8c0; }

/* Buttons: bold with shadow */
[data-theme="fauvism"] :is(button, .button, a.button) {
    border: 2px solid #1a1a2e;
    box-shadow: 3px 3px 0 #1a1a2e;
}
[data-theme="fauvism"] :is(button, .button, a.button):hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #1a1a2e;
    opacity: 1;
}
[data-theme="fauvism"] .outline {
    background: transparent; color: var(--foreground);
    border: 2px solid #1a1a2e;
}

/* FAQ cards */
[data-theme="fauvism"] .faq-list details {
    border: 3px solid #1a1a2e;
    background: #fff;
    border-radius: 0.5rem;
}
[data-theme="fauvism"] .faq-list details:nth-child(4n+1) { box-shadow: 4px 4px 0 #ff6b2b; }
[data-theme="fauvism"] .faq-list details:nth-child(4n+2) { box-shadow: 4px 4px 0 #0055ff; }
[data-theme="fauvism"] .faq-list details:nth-child(4n+3) { box-shadow: 4px 4px 0 #00cc44; }
[data-theme="fauvism"] .faq-list details:nth-child(4n+4) { box-shadow: 4px 4px 0 #ffd700; }

/* Footer: green top border */
[data-theme="fauvism"] .site-footer { border-top: 5px solid #00cc44; }

/* Form inputs */
[data-theme="fauvism"] input,
[data-theme="fauvism"] textarea,
[data-theme="fauvism"] select {
    border: 2px solid #1a1a2e;
}