/* מתג כהה/בהיר - תקן קבוע לכל אתרי Mindset AI (הוראת הבעלים 15/09/2026)
   ברירת המחדל של המוצר נשארת כהה. הבלוק הזה מגדיר רק את מצב הבהיר,
   על גבי משתני ה-root הקיימים ב-styles.css, כדי ש-230 השימושים
   הקיימים ב-var(--...) יתחלפו אוטומטית. צבעים מתוך tokens.css הרשמי. */

:root[data-theme="light"] {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F6F4EF;
    --bg-card: #FFFFFF;
    --bg-card-solid: #F6F4EF;
    --bg-card-hover: #EFEDF3;
    --bg-input: #F6F4EF;
    --bg-sidebar: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.92);

    --text-primary: #202239;
    --text-secondary: #4A3B7A;
    --text-muted: #7A6FA6;

    --border-color: rgba(74, 59, 122, 0.15);
    --border-light: rgba(74, 59, 122, 0.2);
    --border-glow: rgba(74, 59, 122, 0.25);

    --shadow-sm: 0 2px 8px rgba(32, 34, 57, 0.06), 0 1px 3px rgba(32, 34, 57, 0.04);
    --shadow-md: 0 4px 20px rgba(32, 34, 57, 0.08), 0 2px 8px rgba(32, 34, 57, 0.05);
    --shadow-lg: 0 8px 40px rgba(32, 34, 57, 0.1), 0 4px 16px rgba(32, 34, 57, 0.06);
    --shadow-xl: 0 16px 60px rgba(32, 34, 57, 0.12), 0 8px 24px rgba(32, 34, 57, 0.07);
    --shadow-card: 0 4px 24px rgba(32, 34, 57, 0.08), 0 1px 6px rgba(32, 34, 57, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --shadow-card-hover: 0 8px 40px rgba(32, 34, 57, 0.1), 0 0 20px var(--green-glow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse at 15% 15%, rgba(137, 110, 192, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 80%, rgba(74, 59, 122, 0.04) 0%, transparent 45%);
}

/* כפתור המתג עצמו - אחד-לאחד מול agents.mindsetaisys.com */
.theme-toggle {
    all: unset;
    cursor: pointer;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    border: 1px solid var(--green-primary);
    color: var(--green-primary);
    flex: 0 0 auto;
    transition: var(--transition-fast);
}
.theme-toggle:hover {
    background: var(--bg-card-hover);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--green-primary);
    outline-offset: 2px;
}
.theme-toggle svg {
    width: 20px;
    height: 20px;
}