/* ══════════════════════════════════════════════
   THEMES — konteringsmallar.se
   3 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: #756a5e;
    --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);
}

/* Kontoplan cards */
[data-theme="nordic"] .kp-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-small);
}

/* 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. 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;
    max-width: 100%;
    background: #f0c808;
    padding: 0.1em 0.4em;
    letter-spacing: -0.01em;
    font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
}

/* 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; }

/* Kontoplan cards */
[data-theme="destijl"] .kp-card {
    border: 4px solid #111;
    background: var(--card);
}
[data-theme="destijl"] .kp-card:nth-child(5n+1) { border-left: 14px solid #d42828; }
[data-theme="destijl"] .kp-card:nth-child(5n+2) { border-left: 14px solid #1a3e8a; }
[data-theme="destijl"] .kp-card:nth-child(5n+3) { border-left: 14px solid #f0c808; }
[data-theme="destijl"] .kp-card:nth-child(5n+4) { border-left: 14px solid #111; }
[data-theme="destijl"] .kp-card:nth-child(5n+5) { border-left: 14px solid #d42828; }

/* 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;
}


/* ═══════════════════════════════════════════
   4. FAUVISM
   Wild expressionism. Matisse energy.
   Colors that "shouldn't" go together but do.
   ═══════════════════════════════════════════ */
[data-theme="fauvism"] {
    --background: #fff8e7;
    --foreground: #1a1a2e;
    --primary: #bf4c12;
    --primary-foreground: #fff;
    --card: #fff;
    --border: #3d3535;
    --muted: #fff0d0;
    --muted-foreground: #666;
    --input: #888;
    --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: var(--primary); }
[data-theme="fauvism"] h2 { color: #0055ff; }

/* Cards: colored left accent + matching offset shadow, hover rotates */
[data-theme="fauvism"] .seed-list li {
    border: 3px solid #3d3535;
    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 #3d3535;
    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;
}

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

/* Table: thick border, blue header, cream stripes, pink hover */
[data-theme="fauvism"] .recipe-table { border: 4px solid #3d3535; }
[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 #3d3535;
    box-shadow: 3px 3px 0 #3d3535;
}
[data-theme="fauvism"] :is(button, .button, a.button):hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #3d3535;
    opacity: 1;
}
[data-theme="fauvism"] .outline {
    background: transparent; color: var(--foreground);
    border: 2px solid #3d3535;
}

/* FAQ cards */
[data-theme="fauvism"] .faq-list details {
    border: 3px solid #3d3535;
    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 #3d3535;
}