/* ==============================================================================
 * Mentifyll: Töltsd fel az elméd! — Google Material 3 Design Tokens
 * Készítők: Kormos Attila és a Google Gemini valamint Claude Opus
 * ============================================================================== */

:root {
    /* Google / Mentifyll Alapszínek (Brand Colors) — Sötét téma alapértelmezetten */
    --color-primary: #2dd4bf;
    --color-primary-dark: #14b8a6;
    --color-primary-light: #99f6e4;
    --color-primary-container: #115e59;
    --color-on-primary-container: #ccfbf1;
    --color-primary-rgb: 45, 212, 191;

    /* Google Indigo / Secondary */
    --color-indigo: #a5b4fc;
    --color-indigo-dark: #818cf8;
    --color-indigo-light: #c7d2fe;
    --color-indigo-text: #c7d2fe;
    --color-indigo-container: #312e81;

    /* Kiemelő színek (Accents) */
    --color-yellow: #fbbf24;
    --color-yellow-dark: #f59e0b;
    --color-yellow-container: #78350f;

    --color-coral: #fb7185;
    --color-coral-dark: #f43f5e;
    --color-coral-container: #881337;

    /* Felületi színek — Modern Google M3 Sötét Felület (High Contrast) */
    --color-bg: #0b0f19;
    --color-surface: #151e32;
    --color-surface-hover: #1e2942;
    --color-surface-variant: #1c263f;
    --color-border: #24304f;
    --color-border-subtle: #1c263f;

    --color-heading: #ffffff;
    --color-card-title: #ffffff;
    --color-card-text: #e2e8f0;
    --color-text-main: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-bottom-nav: #151e32;

    /* Google Tipográfia */
    --font-family: 'Google Sans', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-dyslexic: "OpenDyslexic", "Comic Sans MS", sans-serif;

    /* Térközök */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Lekerekítések (Google Rounded) */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Google Finom Árnyékok (Material Elevation Sötétben) */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 24px 0 rgba(0, 0, 0, 0.6);

    /* Érintési célpont minimum */
    --touch-target-min: 44px;
}

/* Sötét téma explicit osztály (ha rákerül a body-ra) */
.theme-dark {
    --color-primary: #2dd4bf;
    --color-primary-dark: #14b8a6;
    --color-primary-light: #99f6e4;
    --color-primary-container: #115e59;
    --color-on-primary-container: #ccfbf1;
    --color-primary-rgb: 45, 212, 191;

    --color-indigo: #a5b4fc;
    --color-indigo-dark: #818cf8;
    --color-indigo-light: #c7d2fe;
    --color-indigo-text: #c7d2fe;
    --color-indigo-container: #312e81;

    --color-yellow: #fbbf24;
    --color-yellow-dark: #f59e0b;
    --color-yellow-container: #78350f;

    --color-coral: #fb7185;
    --color-coral-dark: #f43f5e;
    --color-coral-container: #881337;

    --color-bg: #0b0f19;
    --color-surface: #151e32;
    --color-surface-hover: #1e2942;
    --color-surface-variant: #1c263f;
    --color-border: #24304f;
    --color-border-subtle: #1c263f;

    --color-heading: #ffffff;
    --color-card-title: #ffffff;
    --color-card-text: #e2e8f0;
    --color-text-main: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-bottom-nav: #151e32;

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 24px 0 rgba(0, 0, 0, 0.6);
}

/* Opcionális Világos téma (ha a felhasználó a témaváltóra kattint) */
.theme-light {
    --color-primary: #00897b;
    --color-primary-dark: #00695c;
    --color-primary-light: #4ebaaa;
    --color-primary-container: #e0f2f1;
    --color-on-primary-container: #004d40;
    --color-primary-rgb: 0, 137, 123;

    --color-indigo: #4338ca;
    --color-indigo-dark: #312e81;
    --color-indigo-light: #818cf8;
    --color-indigo-text: #3730a3;
    --color-indigo-container: #ede9fe;

    --color-yellow: #f59e0b;
    --color-yellow-dark: #d97706;
    --color-yellow-container: #fef3c7;

    --color-coral: #ef4444;
    --color-coral-dark: #dc2626;
    --color-coral-container: #fee2e2;

    --color-bg: #f8fafd;
    --color-surface: #ffffff;
    --color-surface-hover: #f1f5f9;
    --color-surface-variant: #f0f4f9;
    --color-border: #e2e8f0;
    --color-border-subtle: #f1f5f9;

    --color-heading: #1e1b4b;
    --color-card-title: #1e1b4b;
    --color-card-text: #334155;
    --color-text-main: #1f2937;
    --color-text-muted: #64748b;
    --color-bottom-nav: #ffffff;

    --shadow-sm: 0 1px 3px 0 rgba(60, 64, 67, 0.12), 0 1px 2px 0 rgba(60, 64, 67, 0.08);
    --shadow-md: 0 4px 12px 0 rgba(60, 64, 67, 0.14), 0 1px 3px 0 rgba(60, 64, 67, 0.08);
    --shadow-lg: 0 10px 24px 0 rgba(60, 64, 67, 0.18), 0 2px 6px 0 rgba(60, 64, 67, 0.10);
}