/* ============================================================
   MEMPHIS THEME — Playful, colorful, geometric, 80s-inspired
   Loaded only when the active theme is 'memphis'.
   Bold black borders, hard offset shadows, pill buttons.
   ============================================================ */

/* ── Typography ─────────────────────────────────────────── */
body {
    font-family: 'Baloo 2', 'Inter', system-ui, sans-serif !important;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Baloo 2', 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
}

h1 {
    letter-spacing: -0.01em;
}

/* ── Geometric background pattern ───────────────────────── */
body {
    background-color: var(--theme-background);
    background-image:
        radial-gradient(circle at 8px 8px, rgba(155, 93, 229, 0.10) 3px, transparent 3px),
        radial-gradient(circle at 32px 40px, rgba(0, 217, 245, 0.08) 4px, transparent 4px),
        radial-gradient(circle at 56px 16px, rgba(255, 92, 141, 0.08) 3px, transparent 3px);
    background-size: 72px 72px;
}

/* ── Cards: thick borders + hard offset shadows ─────────── */
.organic-card,
.bg-white {
    border: 3px solid var(--theme-border) !important;
    border-radius: 1.25rem !important;
    box-shadow: 6px 6px 0 var(--theme-border) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.organic-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 9px 9px 0 var(--theme-border) !important;
}

/* Soften shadows utilities into hard Memphis shadows */
.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl,
.shadow-organic, .shadow-organic-lg {
    box-shadow: 6px 6px 0 var(--theme-border) !important;
}

/* Nested white boxes inside cards shouldn't double-border */
.bg-white .bg-white,
.bg-white .bg-gray-50 {
    border-width: 2px !important;
    box-shadow: 3px 3px 0 var(--theme-border) !important;
}

/* ── Buttons: pills with borders + press effect ─────────── */
button,
input[type="submit"],
.organic-btn,
.quick-action-btn,
a[class*="bg-gradient"] {
    border: 3px solid var(--theme-border) !important;
    border-radius: 9999px !important;
    box-shadow: 4px 4px 0 var(--theme-border) !important;
    font-weight: 700 !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

button:hover,
input[type="submit"]:hover,
.organic-btn:hover,
a[class*="bg-gradient"]:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--theme-border) !important;
}

button:active,
input[type="submit"]:active,
.organic-btn:active,
a[class*="bg-gradient"]:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 var(--theme-border) !important;
}

/* Flatten gradients into solid Memphis pink */
.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b {
    background-image: none !important;
    background-color: var(--theme-primary) !important;
}

/* ── Inputs: chunky borders ─────────────────────────────── */
input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select,
.organic-input {
    border: 3px solid var(--theme-border) !important;
    border-radius: 1rem !important;
    background: var(--theme-surface) !important;
    box-shadow: 4px 4px 0 rgba(26, 26, 46, 0.15) !important;
    font-family: 'Baloo 2', system-ui, sans-serif !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--theme-secondary) !important;
    border-color: var(--theme-border) !important;
}

/* Checkboxes / radios keep native look but tinted */
input[type="checkbox"], input[type="radio"] {
    border: 2px solid var(--theme-border) !important;
    border-radius: 0.375rem !important;
    box-shadow: none !important;
    accent-color: var(--theme-primary);
}

/* ── Navbar & footer: bold separators ───────────────────── */
nav, header nav {
    border-bottom: 3px solid var(--theme-border) !important;
    box-shadow: 0 4px 0 rgba(26, 26, 46, 0.08) !important;
}

footer {
    border-top: 3px solid var(--theme-border) !important;
}

/* Footer sits on a dark background — force readable Memphis colors.
   (organic-sand maps to near-black in this theme, which vanishes on dark.) */
footer h3,
footer .font-serif {
    color: var(--theme-warning) !important;   /* memphis yellow headings */
}

footer p,
footer li,
footer span,
footer a {
    color: rgba(255, 249, 240, 0.85) !important;  /* warm cream text */
}

footer a:hover {
    color: var(--theme-primary) !important;   /* memphis pink on hover */
}

/* Social icon circles in footer */
footer a[class*="rounded-full"] {
    background-color: var(--theme-primary) !important;
    border: 2px solid rgba(255, 249, 240, 0.9) !important;
    color: #FFF9F0 !important;
}

footer a[class*="rounded-full"]:hover {
    background-color: var(--theme-secondary) !important;
}

/* Footer top accent strip: flat yellow instead of gradient */
footer .bg-gradient-to-r {
    background-color: var(--theme-warning) !important;
}

/* ── Badges & pills: colorful chips ─────────────────────── */
.rounded-full[class*="bg-"], span[class*="rounded-full"] {
    border: 2px solid var(--theme-border);
    font-weight: 700;
}

/* ── Progress bars ──────────────────────────────────────── */
.rounded-full.h-full, [class*="progress"] {
    border-radius: 9999px;
}

/* ── Score circles keep conic gradient but add ring ─────── */
.score-circle {
    border: 3px solid var(--theme-border) !important;
    box-shadow: 5px 5px 0 var(--theme-border) !important;
}

/* ── Tables ─────────────────────────────────────────────── */
table {
    border: 3px solid var(--theme-border) !important;
    border-radius: 1rem;
    overflow: hidden;
}

thead {
    background-color: var(--theme-warning) !important;
    color: var(--theme-text-primary) !important;
    border-bottom: 3px solid var(--theme-border) !important;
}

/* ── Flash messages ─────────────────────────────────────── */
.flash-message {
    border: 3px solid var(--theme-border) !important;
    box-shadow: 4px 4px 0 var(--theme-border) !important;
    border-radius: 1rem !important;
    font-weight: 600;
}

/* ── Colorful section accents (rotate through palette) ──── */
.organic-card:nth-of-type(4n+1) { --memphis-accent: var(--theme-primary); }
.organic-card:nth-of-type(4n+2) { --memphis-accent: var(--theme-secondary); }
.organic-card:nth-of-type(4n+3) { --memphis-accent: var(--theme-success); }
.organic-card:nth-of-type(4n+4) { --memphis-accent: var(--theme-warning); }

/* ── Scrollbar (webkit) ─────────────────────────────────── */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: var(--theme-background); }
::-webkit-scrollbar-thumb {
    background: var(--theme-primary);
    border: 3px solid var(--theme-background);
    border-radius: 9999px;
}