/**

 * NeuraWeb Shell - Appearance Settings Styles

 * Color picker, font controls, accessibility, holiday themes

 */



/* ==========================================================================

   ACCENT COLOR GRID

   ========================================================================== */



.color-grid-container {

    padding: 1.25rem;

}



.color-group {

    margin-bottom: 1.25rem;

}



.color-group:last-child {

    margin-bottom: 0;

}



.color-group-label {

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 0.625rem;

}



.color-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

}



.color-swatch {

    width: 40px;

    height: 40px;

    border-radius: 0.5rem;

    border: 2px solid transparent;

    cursor: pointer;

    transition: all 0.15s ease;

    position: relative;

}



.color-swatch:hover {

    transform: scale(1.15);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    z-index: 1;

}



.color-swatch.active {

    border-color: var(--text-primary);

    box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--text-primary);

}



.color-swatch.active::after {

    content: '\f00c';

    font-family: 'Font Awesome 6 Free';

    font-weight: 900;

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 0.875rem;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

}



.color-swatch.gradient {

    background-size: 100% 100%;

}



/* Preview mode - pulsing border */

.color-swatch.previewing {

    animation: preview-pulse 1s ease-in-out infinite;

}



@keyframes preview-pulse {

    0%, 100% { box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--primary); }

    50% { box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 6px var(--primary); }

}



/* ==========================================================================

   FONT SIZE BUTTONS

   ========================================================================== */



.font-size-options {

    display: flex;

    gap: 0.375rem;

}



.font-size-btn {

    width: 36px;

    height: 36px;

    border: 1px solid var(--border);

    background: var(--bg-secondary);

    color: var(--text-secondary);

    border-radius: 0.375rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.15s ease;

}



.font-size-btn:hover {

    border-color: var(--primary);

    color: var(--primary);

}



.font-size-btn.active {

    background: var(--primary);

    border-color: var(--primary);

    color: white;

}



.font-size-btn[data-size="small"] { font-size: 0.6875rem; }

.font-size-btn[data-size="medium"] { font-size: 0.8125rem; }

.font-size-btn[data-size="large"] { font-size: 0.9375rem; }

.font-size-btn[data-size="xl"] { font-size: 1.0625rem; }



/* ==========================================================================

   HOLIDAY THEMES

   ========================================================================== */



.holiday-preview-list {

    padding: 0 1.25rem 1.25rem;

}



.holiday-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.875rem;

    background: var(--bg-secondary);

    border: 1px solid var(--border);

    border-radius: 0.5rem;

    margin-bottom: 0.625rem;

    transition: all 0.15s ease;

}



.holiday-card:last-child {

    margin-bottom: 0;

}



.holiday-card:hover {

    border-color: var(--primary);

}



.holiday-card-info {

    display: flex;

    align-items: center;

    gap: 0.875rem;

    flex: 1;

    min-width: 0;

}



.holiday-card-colors {

    display: flex;

    gap: 0.25rem;

}



.holiday-color-preview {

    width: 24px;

    height: 24px;

    border-radius: 0.25rem;

    border: 1px solid var(--border);

}



.holiday-card-text {

    flex: 1;

    min-width: 0;

}



.holiday-card-name {

    font-weight: 600;

    font-size: 0.875rem;

    color: var(--text-primary);

    display: flex;

    align-items: center;

    gap: 0.375rem;

}



.holiday-card-name i {

    font-size: 0.75rem;

}



.holiday-card-date {

    font-size: 0.75rem;

    color: var(--text-secondary);

    margin-top: 0.125rem;

}



.holiday-card-actions {

    display: flex;

    gap: 0.5rem;

}



.btn-preview {

    padding: 0.375rem 0.75rem;

    font-size: 0.75rem;

    font-weight: 500;

    border: 1px solid var(--border);

    background: var(--bg-primary);

    color: var(--text-secondary);

    border-radius: 0.375rem;

    cursor: pointer;

    transition: all 0.15s ease;

}



.btn-preview:hover {

    border-color: var(--primary);

    color: var(--primary);

    background: var(--bg-secondary);

}



.btn-preview.previewing {

    background: var(--primary);

    border-color: var(--primary);

    color: white;

}



/* Holiday preview active banner */

.holiday-preview-banner {

    position: fixed;

    top: var(--nw-topbar-height, 40px);

    left: 0;

    right: 0;

    background: var(--primary);

    color: white;

    padding: 0.625rem 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    font-size: 0.875rem;

    font-weight: 500;

    z-index: 9999;

    animation: slide-down 0.2s ease;

}



@keyframes slide-down {

    from { transform: translateY(-100%); }

    to { transform: translateY(0); }

}



.holiday-preview-banner button {

    padding: 0.25rem 0.625rem;

    background: rgba(255, 255, 255, 0.2);

    border: 1px solid rgba(255, 255, 255, 0.3);

    color: white;

    border-radius: 0.25rem;

    cursor: pointer;

    font-size: 0.75rem;

    font-weight: 500;

    transition: background 0.15s;

}



.holiday-preview-banner button:hover {

    background: rgba(255, 255, 255, 0.3);

}



/* Empty state for no ethnicities */

.holiday-empty-state {

    text-align: center;

    padding: 2rem 1.25rem;

    color: var(--text-secondary);

}



.holiday-empty-state i {

    font-size: 2.5rem;

    margin-bottom: 0.75rem;

    opacity: 0.5;

}



.holiday-empty-state p {

    font-size: 0.875rem;

    margin-bottom: 1rem;

}



/* ==========================================================================

   ACCESSIBILITY ENHANCEMENTS

   ========================================================================== */



/* High Contrast Mode */

[data-high-contrast="true"] {

    --text-primary: #000000;

    --text-secondary: #1a1a1a;

    --border-color: #000000;

}



[data-theme="dark"][data-high-contrast="true"] {

    --text-primary: #ffffff;

    --text-secondary: #e5e5e5;

    --border-color: #ffffff;

}



/* Reduced Motion */

[data-reduced-motion="true"],

[data-reduced-motion="true"] * {

    animation-duration: 0.001ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.001ms !important;

}



/* Dyslexia-Friendly Mode */

[data-dyslexia-friendly="true"] {

    font-family: 'OpenDyslexic', sans-serif;

    letter-spacing: 0.05em;

    word-spacing: 0.1em;

    line-height: 1.8;

}



/* ==========================================================================

   FONT SIZE SCALING

   ========================================================================== */



[data-font-size="small"] {

    font-size: 14px;

}



[data-font-size="medium"] {

    font-size: 16px;

}



[data-font-size="large"] {

    font-size: 18px;

}



[data-font-size="xl"] {

    font-size: 20px;

}



/* ==========================================================================

   ACCENT COLOR VARIABLES

   ========================================================================== */



/* Solid Colors - Sets --primary (settings) and --nw-accent (shell) */

[data-accent="cyan"] { --primary: #06b6d4; --primary-hover: #0891b2; --nw-accent: #06b6d4; --nw-accent-light: #22d3ee; --nw-primary: #0891b2; --nw-secondary: #06b6d4; }

[data-accent="sky"] { --primary: #0ea5e9; --primary-hover: #0284c7; --nw-accent: #0ea5e9; --nw-accent-light: #38bdf8; --nw-primary: #0284c7; --nw-secondary: #0ea5e9; }

[data-accent="blue"] { --primary: #3b82f6; --primary-hover: #2563eb; --nw-accent: #3b82f6; --nw-accent-light: #60a5fa; --nw-primary: #2563eb; --nw-secondary: #3b82f6; }

[data-accent="indigo"] { --primary: #6366f1; --primary-hover: #4f46e5; --nw-accent: #6366f1; --nw-accent-light: #818cf8; --nw-primary: #4f46e5; --nw-secondary: #6366f1; }

[data-accent="navy"] { --primary: #1e3a5f; --primary-hover: #172e4d; --nw-accent: #1e3a5f; --nw-accent-light: #2d5a87; --nw-primary: #172e4d; --nw-secondary: #1e3a5f; }



[data-accent="mint"] { --primary: #34d399; --primary-hover: #10b981; --nw-accent: #34d399; --nw-accent-light: #6ee7b7; --nw-primary: #10b981; --nw-secondary: #34d399; }

[data-accent="emerald"] { --primary: #10b981; --primary-hover: #059669; --nw-accent: #10b981; --nw-accent-light: #34d399; --nw-primary: #059669; --nw-secondary: #10b981; }

[data-accent="green"] { --primary: #22c55e; --primary-hover: #16a34a; --nw-accent: #22c55e; --nw-accent-light: #4ade80; --nw-primary: #16a34a; --nw-secondary: #22c55e; }

[data-accent="teal"] { --primary: #14b8a6; --primary-hover: #0d9488; --nw-accent: #14b8a6; --nw-accent-light: #2dd4bf; --nw-primary: #0d9488; --nw-secondary: #14b8a6; }

[data-accent="forest"] { --primary: #166534; --primary-hover: #14532d; --nw-accent: #166534; --nw-accent-light: #22c55e; --nw-primary: #14532d; --nw-secondary: #166534; }



[data-accent="yellow"] { --primary: #eab308; --primary-hover: #ca8a04; --nw-accent: #eab308; --nw-accent-light: #facc15; --nw-primary: #ca8a04; --nw-secondary: #eab308; }

[data-accent="amber"] { --primary: #f59e0b; --primary-hover: #d97706; --nw-accent: #f59e0b; --nw-accent-light: #fbbf24; --nw-primary: #d97706; --nw-secondary: #f59e0b; }

[data-accent="orange"] { --primary: #f97316; --primary-hover: #ea580c; --nw-accent: #f97316; --nw-accent-light: #fb923c; --nw-primary: #ea580c; --nw-secondary: #f97316; }

[data-accent="coral"] { --primary: #fb7185; --primary-hover: #f43f5e; --nw-accent: #fb7185; --nw-accent-light: #fda4af; --nw-primary: #f43f5e; --nw-secondary: #fb7185; }

[data-accent="red"] { --primary: #ef4444; --primary-hover: #dc2626; --nw-accent: #ef4444; --nw-accent-light: #f87171; --nw-primary: #dc2626; --nw-secondary: #ef4444; }



[data-accent="rose"] { --primary: #f43f5e; --primary-hover: #e11d48; --nw-accent: #f43f5e; --nw-accent-light: #fb7185; --nw-primary: #e11d48; --nw-secondary: #f43f5e; }

[data-accent="pink"] { --primary: #ec4899; --primary-hover: #db2777; --nw-accent: #ec4899; --nw-accent-light: #f472b6; --nw-primary: #db2777; --nw-secondary: #ec4899; }

[data-accent="fuchsia"] { --primary: #d946ef; --primary-hover: #c026d3; --nw-accent: #d946ef; --nw-accent-light: #e879f9; --nw-primary: #c026d3; --nw-secondary: #d946ef; }

[data-accent="purple"] { --primary: #a855f7; --primary-hover: #9333ea; --nw-accent: #a855f7; --nw-accent-light: #c084fc; --nw-primary: #9333ea; --nw-secondary: #a855f7; }

[data-accent="violet"] { --primary: #8b5cf6; --primary-hover: #7c3aed; --nw-accent: #8b5cf6; --nw-accent-light: #a78bfa; --nw-primary: #7c3aed; --nw-secondary: #8b5cf6; }



[data-accent="slate"] { --primary: #64748b; --primary-hover: #475569; --nw-accent: #64748b; --nw-accent-light: #94a3b8; --nw-primary: #475569; --nw-secondary: #64748b; }

[data-accent="gray"] { --primary: #6b7280; --primary-hover: #4b5563; --nw-accent: #6b7280; --nw-accent-light: #9ca3af; --nw-primary: #4b5563; --nw-secondary: #6b7280; }

[data-accent="stone"] { --primary: #78716c; --primary-hover: #57534e; --nw-accent: #78716c; --nw-accent-light: #a8a29e; --nw-primary: #57534e; --nw-secondary: #78716c; }

[data-accent="zinc"] { --primary: #71717a; --primary-hover: #52525b; --nw-accent: #71717a; --nw-accent-light: #a1a1aa; --nw-primary: #52525b; --nw-secondary: #71717a; }



/* Gradients - applied to buttons/elements that support it */

[data-accent="gradient-ocean"] { --primary: #06b6d4; --primary-gradient: linear-gradient(135deg, #06b6d4, #3b82f6); --nw-accent: #06b6d4; --nw-accent-light: #3b82f6; --nw-primary: #0891b2; --nw-secondary: #2563eb; }

[data-accent="gradient-sunset"] { --primary: #f97316; --primary-gradient: linear-gradient(135deg, #f97316, #ef4444); --nw-accent: #f97316; --nw-accent-light: #ef4444; --nw-primary: #ea580c; --nw-secondary: #dc2626; }

[data-accent="gradient-aurora"] { --primary: #10b981; --primary-gradient: linear-gradient(135deg, #10b981, #06b6d4); --nw-accent: #10b981; --nw-accent-light: #06b6d4; --nw-primary: #059669; --nw-secondary: #0891b2; }

[data-accent="gradient-flame"] { --primary: #eab308; --primary-gradient: linear-gradient(135deg, #eab308, #ef4444); --nw-accent: #eab308; --nw-accent-light: #ef4444; --nw-primary: #ca8a04; --nw-secondary: #dc2626; }

[data-accent="gradient-berry"] { --primary: #ec4899; --primary-gradient: linear-gradient(135deg, #ec4899, #8b5cf6); --nw-accent: #ec4899; --nw-accent-light: #8b5cf6; --nw-primary: #db2777; --nw-secondary: #7c3aed; }

[data-accent="gradient-midnight"] { --primary: #1e3a5f; --primary-gradient: linear-gradient(135deg, #1e3a5f, #6366f1); --nw-accent: #1e3a5f; --nw-accent-light: #6366f1; --nw-primary: #172e4d; --nw-secondary: #4f46e5; }



/* ==========================================================================

   RESPONSIVE

   ========================================================================== */



@media (max-width: 768px) {

    .color-swatch {

        width: 36px;

        height: 36px;

    }

    

    .holiday-card {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.75rem;

    }

    

    .holiday-card-actions {

        width: 100%;

    }

    

    .btn-preview {

        flex: 1;

    }

}



@media (max-width: 480px) {

    .color-swatch {

        width: 32px;

        height: 32px;

    }

    

    .font-size-btn {

        width: 32px;

        height: 32px;

    }

}




/* ==========================================================================

   FONT FAMILY RULES

   ========================================================================== */



[data-font-family="system"] {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

}



[data-font-family="dm-sans"] {

    font-family: 'DM Sans', sans-serif;

}



[data-font-family="fira-sans"] {

    font-family: 'Fira Sans', sans-serif;

}



[data-font-family="inter"] {

    font-family: 'Inter', sans-serif;

}



[data-font-family="lato"] {

    font-family: 'Lato', sans-serif;

}



[data-font-family="montserrat"] {

    font-family: 'Montserrat', sans-serif;

}



[data-font-family="nunito"] {

    font-family: 'Nunito', sans-serif;

}



[data-font-family="open-sans"] {

    font-family: 'Open Sans', sans-serif;

}



[data-font-family="opendyslexic"] {

    font-family: 'OpenDyslexic', sans-serif;

}



[data-font-family="outfit"] {

    font-family: 'Outfit', sans-serif;

}



[data-font-family="poppins"] {

    font-family: 'Poppins', sans-serif;

}



[data-font-family="roboto"] {

    font-family: 'Roboto', sans-serif;

}