/**
 * Testportalen Theme System
 * Central CSS variables and utility classes
 * Version: 1.0
 */

:root {
    /* ==================== PRIMARY COLORS ==================== */
    --color-primary: #4F46E5;
    /* Indigo 600 */
    --color-primary-hover: #4338CA;
    /* Indigo 700 */
    --color-primary-light: #6366F1;
    /* Indigo 500 */

    /* ==================== ACCENT COLORS ==================== */
    --color-accent-blue: #E0F2FE;
    /* Sky 100 */
    --color-accent-sky: #BAE6FD;
    /* Sky 200 */
    --color-accent-purple: #F3E8FF;
    /* Purple 100 */
    --color-accent-green: #DCFCE7;
    /* Emerald 100 */
    --color-accent-rose: #FFE4E6;
    /* Rose 100 */
    --color-accent-amber: #FEF3C7;
    /* Amber 100 */

    /* ==================== TEXT COLORS ==================== */
    --color-text-main: #1E293B;
    /* Slate 800 */
    --color-text-muted: #64748B;
    /* Slate 500 */
    --color-text-light: #94A3B8;
    /* Slate 400 */
    --color-text-inverse: #FFFFFF;

    /* ==================== EXTENDED COLOR PALETTE ==================== */
    --color-slate-800: #1E293B;
    --color-slate-500: #64748B;
    --color-emerald-300: #6EE7B7;
    --color-emerald-500: #10B981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --color-amber-300: #FCD34D;
    --color-amber-600: #D97706;
    --color-amber-700: #B45309;
    --color-amber-800: #92400E;
    --color-rose-300: #FDA4AF;
    --color-rose-400: #FB7185;
    --color-rose-600: #E11D48;
    --color-rose-700: #BE123C;
    --color-rose-800: #9F1239;
    --color-rose-200: #FECDD3;
    --color-sky-50: #F0F9FF;
    --color-sky-100: #E0F2FE;
    --color-sky-200: #BAE6FD;
    --color-sky-300: #7DD3FC;
    --color-sky-400: #38BDF8;
    --color-sky-600: #0284C7;
    --color-sky-700: #0369A1;
    --color-sky-800: #075985;
    --color-purple-600: #9333EA;
    --color-purple-700: #7E22CE;

    /* ==================== GAME INTERACTION COLORS ==================== */
    --color-selected-bg: var(--color-sky-50);
    /* Selected cell background */
    --color-selected-border: var(--color-sky-600);
    /* Selected cell border */

    /* ==================== BACKGROUND COLORS ==================== */
    --color-bg-main: #F8FAFC;
    /* Slate 50 */
    --color-bg-card: #FFFFFF;
    --color-bg-hover: #F1F5F9;
    /* Slate 100 */
    --color-bg-input: #FFFFFF;

    /* ==================== BORDER COLORS ==================== */
    /* Slate 200 */
    --color-border-main: #E2E8F0;
    /* Slate 200 */
    --color-border-focus: var(--color-primary);
    --color-border-hover: #CBD5E1;
    /* Slate 300 */
    --color-border-input: #CBD5E1;
    /* Slate 300 */
    --color-border-alt: #CBD5E1;
    /* Slate 300 */

    /* ==================== STATUS COLORS ==================== */
    --color-success: #10B981;
    /* Emerald 500 */
    --color-success-bg: #D1FAE5;
    /* Emerald 100 */
    --color-success-text: #065F46;
    /* Emerald 800 */

    --color-warning: #F59E0B;
    /* Amber 500 */
    --color-warning-bg: #FEF3C7;
    /* Amber 100 */
    --color-warning-text: #92400E;
    /* Amber 800 */

    --color-error: #EF4444;
    /* Red 500 */
    --color-error-bg: #FEE2E2;
    /* Red 100 */
    --color-error-text: #991B1B;
    /* Red 800 */

    --color-info: #3B82F6;
    /* Blue 500 */
    --color-info-bg: #DBEAFE;
    /* Blue 100 */
    --color-info-text: #1E40AF;
    /* Blue 800 */

    /* ==================== GRID PUZZLE CELLS ==================== */
    --cell-fixed: #F4F4F4;
    /* Förutbestämd, kan ej ändras */
    --cell-empty: #FFFFFF;
    /* Tom cell */
    --cell-selected: #93C5FD;
    /* Markerad cell (blue-300) */
    --cell-active: #BFDBFE;
    /* Aktiv/fokuserad (blue-200) */
    --cell-highlight-primary: #EFF6FF;
    /* Primär highlight (blue-50) */
    --cell-highlight-secondary: #F3F4F6;
    /* Sekundär highlight (gray-100) */

    /* ==================== CELL STATES ==================== */
    --color-cell-correct: #10B981;
    /* Rätt svar (emerald-500) */
    --color-cell-present: #F59E0B;
    /* Delvis rätt (amber-500) */
    --color-cell-absent: #6B7280;
    /* Fel/används ej (gray-500) */
    --cell-error: #FEE2E2;
    /* Felaktig (red-100) */
    --cell-hint: #FEF3C7;
    /* Ledtråd (yellow-100) */

    /* ==================== CELL CONTENT ==================== */
    --cell-text-fixed: #1E293B;
    /* Förutbestämd text */
    --cell-text-user: #4F46E5;
    /* Användarens input (primary) */
    --cell-text-correct: #059669;
    /* Rätt svar text (emerald-600) */
    --cell-text-error: #DC2626;
    /* Fel svar text (red-600) */
    --cell-text-hint: #D97706;
    /* Ledtråd text (amber-600) */

    /* ==================== GRID STRUCTURE ==================== */
    --grid-border: #E2E8F0;
    /* Cell borders (slate-200) */
    --grid-border-thick: #1E293B;
    /* Section dividers (slate-800) */
    --grid-background: #FFFFFF;

    /* ==================== DIFFICULTY LEVELS ==================== */
    --diff-level-1-bg: #DBEAFE;
    /* Beginner (blue-100) */
    --diff-level-1-text: #1E40AF;
    /* (blue-800) */

    --diff-level-2-bg: #D1FAE5;
    /* Easy (emerald-100) */
    --diff-level-2-text: #065F46;
    /* (emerald-800) */

    --diff-level-3-bg: #FEF3C7;
    /* Medium (amber-100) */
    --diff-level-3-text: #92400E;
    /* (amber-800) */

    --diff-level-4-bg: #FED7AA;
    /* Hard (orange-200) */
    --diff-level-4-text: #9A3412;
    /* (orange-800) */

    --diff-level-5-bg: #FECACA;
    /* Expert (red-200) */
    --diff-level-5-text: #991B1B;
    /* (red-800) */
}

/* ==================== UTILITY CLASSES - BUTTONS ==================== */

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 700;
    transition: background-color 200ms;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: var(--color-bg-hover);
    color: var(--color-text-main);
    transition: background-color 200ms;
}

.btn-secondary:hover {
    background-color: var(--color-border-hover);
}

.btn-info {
    background-color: var(--color-info);
    color: var(--color-text-inverse);
    transition: filter 200ms;
}

.btn-info:hover {
    filter: brightness(0.9);
}

.btn-warning {
    background-color: var(--color-warning);
    color: var(--color-text-inverse);
    transition: filter 200ms;
}

.btn-warning:hover {
    filter: brightness(0.9);
}

.btn-success {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    transition: filter 200ms;
}

.btn-success:hover {
    filter: brightness(0.9);
}

.btn-error {
    background-color: var(--color-error);
    color: var(--color-text-inverse);
    transition: filter 200ms;
}

.btn-error:hover {
    filter: brightness(0.9);
}

/* ==================== UTILITY CLASSES - TEXT ==================== */

.text-main {
    color: var(--color-text-main);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-light {
    color: var(--color-text-light);
}

.text-primary {
    color: var(--color-primary);
}

.text-success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error);
}

/* ==================== UTILITY CLASSES - LINKS ==================== */

.link-primary {
    color: var(--color-primary);
    transition: color 200ms;
}

.link-primary:hover {
    color: var(--color-primary-hover);
}

/* ==================== UTILITY CLASSES - BACKGROUNDS ==================== */

.bg-main {
    background-color: var(--color-bg-main);
}

.bg-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-main);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-hover {
    background-color: var(--color-bg-hover);
}

.bg-hover:hover {
    background-color: var(--color-bg-hover);
}

.bg-hover-dark {
    background-color: var(--color-border-hover);
}

.bg-accent-blue {
    background-color: var(--color-accent-blue);
}

.bg-accent-purple {
    background-color: var(--color-accent-purple);
}

.bg-accent-green {
    background-color: var(--color-accent-green);
}

.bg-accent-rose {
    background-color: var(--color-accent-rose);
}

.bg-accent-amber {
    background-color: var(--color-accent-amber);
}

/* ==================== UTILITY CLASSES - BORDERS ==================== */

.border-main {
    border-color: var(--color-border-main);
}

.border-hover:hover {
    border-color: var(--color-border-hover);
}

.border-primary {
    border-color: var(--color-primary);
}

/* ==================== UTILITY CLASSES - INPUTS ==================== */

.input-focus:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* ==================== UTILITY CLASSES - CARDS ==================== */

.card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-main);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: border-color 200ms, box-shadow 200ms;
}

.card:hover {
    border-color: var(--color-border-hover);
}

.card-interactive:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* ==================== UTILITY CLASSES - ALERTS ==================== */

.alert-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border-left: 4px solid var(--color-success);
}

.alert-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-left: 4px solid var(--color-warning);
}

.alert-error {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border-left: 4px solid var(--color-error);
}

.alert-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border-left: 4px solid var(--color-info);
}

/* ==================== PUZZLE GRID SYSTEM ==================== */

.puzzle-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--color-bg-card);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.puzzle-grid {
    display: grid;
    gap: 0;
    border: 2px solid var(--grid-border-thick);
    background: var(--grid-border-thick);
    aspect-ratio: 1;
}

.puzzle-cell {
    background: var(--cell-empty);
    border: 1px solid var(--grid-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
    user-select: none;
}

.puzzle-borders {
    background-color: var(--grid-border-thick);
}

grid-border-thick
/* ==================== PUZZLE CELL STATES ==================== */

.cell-fixed {
    background-color: var(--cell-fixed);
    color: var(--cell-text-fixed);
    font-weight: bold;
    cursor: default;
}

.cell-empty {
    background-color: var(--cell-empty);
}

.cell-selected {
    background-color: var(--cell-selected) !important;
}

.cell-active {
    background-color: var(--cell-active);
}

.cell-highlight-1 {
    background-color: var(--cell-highlight-primary);
}

.cell-highlight-2 {
    background-color: var(--cell-highlight-secondary);
}

.cell-correct {
    background-color: var(--color-cell-correct);
    color: white;
}

.cell-present {
    background-color: var(--color-cell-present);
    color: white;
}

.cell-absent {
    background-color: var(--color-cell-absent);
    color: white;
}

.cell-error {
    background-color: var(--cell-error);
    color: var(--cell-text-error);
}

.cell-hint {
    background-color: var(--cell-hint);
    color: var(--cell-text-hint);
}

.cell-user-input {
    color: var(--cell-text-user);
}

/* ==================== DIFFICULTY BADGES ==================== */

.difficulty-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    display: inline-block;
}

.diff-level-1 {
    background-color: var(--diff-level-1-bg);
    color: var(--diff-level-1-text);
}

.diff-level-2 {
    background-color: var(--diff-level-2-bg);
    color: var(--diff-level-2-text);
}

.diff-level-3 {
    background-color: var(--diff-level-3-bg);
    color: var(--diff-level-3-text);
}

.diff-level-4 {
    background-color: var(--diff-level-4-bg);
    color: var(--diff-level-4-text);
}

.diff-level-5 {
    background-color: var(--diff-level-5-bg);
    color: var(--diff-level-5-text);
}

/* Semantic aliases for readability */
.diff-beginner {
    background-color: var(--diff-level-1-bg);
    color: var(--diff-level-1-text);
}

.diff-easy {
    background-color: var(--diff-level-2-bg);
    color: var(--diff-level-2-text);
}

.diff-medium {
    background-color: var(--diff-level-3-bg);
    color: var(--diff-level-3-text);
}

.diff-hard {
    background-color: var(--diff-level-4-bg);
    color: var(--diff-level-4-text);
}

.diff-expert {
    background-color: var(--diff-level-5-bg);
    color: var(--diff-level-5-text);
}

/* ==================== GAME INFO PANEL ==================== */

.game-info-panel {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--color-bg-hover);
    border-radius: 8px;
}

.game-stat {
    text-align: center;
}

.game-stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.game-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text-main);
}

/* ==================== SHARED ANIMATIONS ==================== */

@keyframes pop-in {
    0%   { transform: scale(0.7); opacity: 0; }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1);   opacity: 1; }
}
.pop-in { animation: pop-in 0.5s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes fade-up {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.fade-up { animation: fade-up 0.4s ease both; }

.confetti-host { pointer-events: none; position: absolute; inset: 0; overflow: hidden; }