/**
 * HALOJINIX GLOBAL SETTINGS CSS
 *
 * This file provides:
 * 1. CSS custom properties for theming
 * 2. Light/dark mode styles
 * 3. Accessibility preset styles
 * 4. Settings panel and modal styles
 */

/* ========================================
   FONT IMPORTS
   ======================================== */

/* OpenDyslexic for dyslexia-friendly mode */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   CSS CUSTOM PROPERTIES - DARK THEME (Default)
   ======================================== */

:root,
[data-theme="dark"] {
    /* Backgrounds */
    --hj-bg: #000000;
    --hj-bg-elevated: #0a0a0a;
    --hj-bg-surface: #0f0f0f;
    --hj-bg-hover: #141414;

    /* Borders */
    --hj-border: #1a1a1a;
    --hj-border-subtle: #141414;
    --hj-border-focus: #c9a227;

    /* Text */
    --hj-text: #e8e8e8;
    --hj-text-secondary: #888888;
    --hj-text-tertiary: #777777;  /* WCAG AA compliant (4.5:1 on #000) */
    --hj-text-inverse: #000000;

    /* Brand */
    --hj-gold: #c9a227;
    --hj-gold-bright: #d4af37;
    --hj-gold-dim: #8b7355;
    --hj-gold-glow: rgba(201, 162, 39, 0.15);

    /* Semantic */
    --hj-success: #2dd4bf;
    --hj-success-bg: rgba(45, 212, 191, 0.15);
    --hj-error: #f87171;
    --hj-error-bg: rgba(248, 113, 113, 0.15);
    --hj-warning: #fbbf24;
    --hj-warning-bg: rgba(251, 191, 36, 0.15);
    --hj-info: #60a5fa;
    --hj-info-bg: rgba(96, 165, 250, 0.15);

    /* Overlay */
    --hj-overlay: rgba(0, 0, 0, 0.8);

    /* Shadows */
    --hj-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --hj-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --hj-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    /* LEGACY VARIABLE MAPPING - for existing pages */
    --black: var(--hj-bg);
    --near-black: var(--hj-bg-elevated);
    --surface: var(--hj-bg-surface);
    --surface-elevated: var(--hj-bg-surface);
    --border: var(--hj-border);
    --border-subtle: var(--hj-border-subtle);
    --gold: var(--hj-gold);
    --gold-bright: var(--hj-gold-bright);
    --gold-dim: var(--hj-gold-dim);
    --gold-glow: var(--hj-gold-glow);
    --text: var(--hj-text);
    --text-secondary: var(--hj-text-secondary);
    --text-tertiary: var(--hj-text-tertiary);
    --green: var(--hj-success);
    --red: var(--hj-error);
}

/* ========================================
   CSS CUSTOM PROPERTIES - LIGHT THEME
   ======================================== */

[data-theme="light"] {
    /* Backgrounds */
    --hj-bg: #ffffff;
    --hj-bg-elevated: #f8f8f8;
    --hj-bg-surface: #f0f0f0;
    --hj-bg-hover: #e8e8e8;

    /* Borders */
    --hj-border: #d0d0d0;
    --hj-border-subtle: #e0e0e0;
    --hj-border-focus: #8b6914;

    /* Text */
    --hj-text: #1a1a1a;
    --hj-text-secondary: #555555;
    --hj-text-tertiary: #888888;
    --hj-text-inverse: #ffffff;

    /* Brand - slightly darker for light mode */
    --hj-gold: #8b6914;
    --hj-gold-bright: #a67c00;
    --hj-gold-dim: #6b5a3e;
    --hj-gold-glow: rgba(139, 105, 20, 0.1);

    /* Semantic */
    --hj-success: #0d9488;
    --hj-success-bg: rgba(13, 148, 136, 0.1);
    --hj-error: #dc2626;
    --hj-error-bg: rgba(220, 38, 38, 0.1);
    --hj-warning: #d97706;
    --hj-warning-bg: rgba(217, 119, 6, 0.1);
    --hj-info: #2563eb;
    --hj-info-bg: rgba(37, 99, 235, 0.1);

    /* Overlay */
    --hj-overlay: rgba(0, 0, 0, 0.5);

    /* Shadows */
    --hj-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --hj-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --hj-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);

    /* LEGACY VARIABLE MAPPING - for existing pages */
    --black: var(--hj-bg);
    --near-black: var(--hj-bg-elevated);
    --surface: var(--hj-bg-surface);
    --surface-elevated: var(--hj-bg-surface);
    --border: var(--hj-border);
    --border-subtle: var(--hj-border-subtle);
    --gold: var(--hj-gold);
    --gold-bright: var(--hj-gold-bright);
    --gold-dim: var(--hj-gold-dim);
    --gold-glow: var(--hj-gold-glow);
    --text: var(--hj-text);
    --text-secondary: var(--hj-text-secondary);
    --text-tertiary: var(--hj-text-tertiary);
    --green: var(--hj-success);
    --red: var(--hj-error);
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

[data-high-contrast="true"] {
    --hj-text: #ffffff;
    --hj-text-secondary: #e0e0e0;
    --hj-text-tertiary: #c0c0c0;
    --hj-border: #ffffff;
    --hj-border-subtle: #888888;
    --hj-gold: #ffd700;
    --hj-gold-bright: #ffea00;
}

[data-theme="light"][data-high-contrast="true"] {
    --hj-text: #000000;
    --hj-text-secondary: #1a1a1a;
    --hj-text-tertiary: #333333;
    --hj-border: #000000;
    --hj-border-subtle: #333333;
    --hj-gold: #6b4e00;
}

/* ========================================
   FONT SIZE SCALING
   ======================================== */

[data-font-size="small"] {
    font-size: 14px;
}

[data-font-size="normal"] {
    font-size: 16px;
}

[data-font-size="large"] {
    font-size: 18px;
}

[data-font-size="xlarge"] {
    font-size: 20px;
}

/* ========================================
   LINE SPACING
   ======================================== */

[data-line-spacing="normal"] {
    --hj-line-height: 1.6;
}

[data-line-spacing="relaxed"] {
    --hj-line-height: 1.8;
}

[data-line-spacing="loose"] {
    --hj-line-height: 2.0;
}

body {
    line-height: var(--hj-line-height, 1.6);
}

/* ========================================
   DYSLEXIC FONT
   ======================================== */

[data-dyslexic-font="true"] body,
[data-dyslexic-font="true"] input,
[data-dyslexic-font="true"] button,
[data-dyslexic-font="true"] select,
[data-dyslexic-font="true"] textarea {
    font-family: 'OpenDyslexic', sans-serif !important;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
}

/* ========================================
   REDUCED MOTION
   ======================================== */

[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Also respect system preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   FOCUS INDICATORS
   ======================================== */

[data-focus-indicators="true"] *:focus {
    outline: 3px solid var(--hj-gold) !important;
    outline-offset: 2px !important;
}

[data-focus-indicators="true"] *:focus:not(:focus-visible) {
    outline: none !important;
}

[data-focus-indicators="true"] *:focus-visible {
    outline: 3px solid var(--hj-gold) !important;
    outline-offset: 2px !important;
}

/* ========================================
   PRESET: ANXIETY (Calm Mode)
   ======================================== */

[data-preset="anxiety"] {
    --hj-gold: #7da87b;
    --hj-gold-bright: #8fbc8f;
    --hj-gold-dim: #6b8e6b;
    --hj-gold-glow: rgba(125, 168, 123, 0.15);
}

[data-preset="anxiety"][data-theme="light"] {
    --hj-gold: #4a7c48;
    --hj-gold-bright: #5a8c58;
    --hj-gold-dim: #3a6c38;
}

/* ========================================
   PRESET: ADHD / FOCUS MODE
   RT357 Implementation - JONAH spec
   ======================================== */

/* Muted, calmer colors for reduced stimulation */
[data-preset="adhd"] {
    --hj-gold: #a89050;
    --hj-gold-bright: #bba060;
    --hj-gold-dim: #907040;
    --hj-gold-glow: rgba(168, 144, 80, 0.1);

    /* Softer semantic colors */
    --hj-success: #5fb3a5;
    --hj-error: #d08080;
    --hj-warning: #d4a55a;
    --hj-info: #7095c5;
}

/* Light mode ADHD - even calmer */
[data-preset="adhd"][data-theme="light"] {
    --hj-gold: #7a6830;
    --hj-gold-bright: #8a7840;
    --hj-gold-dim: #5a5020;
    --hj-bg: #f5f5f0;
    --hj-bg-surface: #eaeae5;
}

/* Hide decorative elements in ADHD mode */
[data-preset="adhd"] .decorative,
[data-preset="adhd"] .hero-particles,
[data-preset="adhd"] .particle-hero,
[data-preset="adhd"] .bg-decoration,
[data-preset="adhd"] .floating-element,
[data-preset="adhd"] [data-decorative="true"] {
    display: none !important;
}

/* Focus spotlight - dim non-focused content */
[data-preset="adhd"] .focus-dim {
    opacity: 0.4;
    filter: grayscale(0.3);
    transition: opacity 0.15s ease, filter 0.15s ease;
}

/* Currently focused element gets full visibility */
[data-preset="adhd"] .focus-active,
[data-preset="adhd"] *:focus,
[data-preset="adhd"] *:focus-within {
    opacity: 1 !important;
    filter: none !important;
}

/* Cleaner, more scannable text */
[data-preset="adhd"] p {
    max-width: 65ch;
    line-height: 1.9;
}

/* Chunked content - visible section breaks */
[data-preset="adhd"] section,
[data-preset="adhd"] .content-chunk {
    border-left: 3px solid var(--hj-gold-dim);
    padding-left: 1rem;
    margin-bottom: 2rem;
}

/* Progress indicators more prominent */
[data-preset="adhd"] .progress-bar,
[data-preset="adhd"] [role="progressbar"] {
    height: 8px !important;
    border: 1px solid var(--hj-border);
}

/* Session timer widget (positioned by JS) */
.hj-session-timer {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: var(--hj-bg-elevated);
    border: 1px solid var(--hj-border);
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: var(--hj-text-secondary);
    z-index: 9990;
    border-radius: 4px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.hj-session-timer:hover {
    opacity: 1;
}

.hj-session-timer-label {
    color: var(--hj-text-tertiary);
    margin-right: 0.5rem;
}

.hj-session-timer-time {
    font-family: monospace;
    color: var(--hj-gold);
}

/* Break reminder modal */
.hj-break-reminder {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--hj-bg);
    border: 2px solid var(--hj-gold);
    padding: 2rem;
    max-width: 400px;
    text-align: center;
    z-index: 10005;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.hj-break-reminder h3 {
    color: var(--hj-gold);
    margin: 0 0 1rem 0;
}

.hj-break-reminder p {
    color: var(--hj-text-secondary);
    margin-bottom: 1.5rem;
}

.hj-break-reminder-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.hj-break-reminder-btn {
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--hj-border);
    background: var(--hj-bg-surface);
    color: var(--hj-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hj-break-reminder-btn:hover {
    border-color: var(--hj-gold);
    background: var(--hj-gold-glow);
}

.hj-break-reminder-btn.primary {
    background: var(--hj-gold);
    color: var(--hj-text-inverse);
    border-color: var(--hj-gold);
}

/* Hide session timer when not in ADHD mode */
html:not([data-preset="adhd"]) .hj-session-timer {
    display: none;
}

/* ========================================
   SETTINGS TRIGGER BUTTON
   ======================================== */

.hj-settings-trigger {
    position: fixed;
    bottom: 6rem;
    right: 1.5rem;
    z-index: 10001;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--hj-border);
    background: var(--hj-bg-elevated);
    color: var(--hj-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hj-settings-trigger:hover {
    background: var(--hj-bg-surface);
    border-color: var(--hj-gold-dim);
    color: var(--hj-gold);
}

.hj-settings-trigger:focus {
    outline: 2px solid var(--hj-gold);
    outline-offset: 2px;
}

/* ========================================
   SETTINGS PANEL
   ======================================== */

.hj-settings-panel {
    position: fixed;
    inset: 0;
    z-index: 10002; /* Above everything including the trigger (10001) */
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease;
}

.hj-settings-panel.open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s ease;
}

/* Details/Summary for collapsible sections */
.hj-settings-section details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hj-settings-section details summary::-webkit-details-marker {
    display: none;
}

.hj-settings-section details summary::before {
    content: '▸';
    font-size: 0.8rem;
    color: var(--hj-text-tertiary);
    transition: transform 0.2s ease;
}

.hj-settings-section details[open] summary::before {
    transform: rotate(90deg);
}

.hj-settings-section details summary h3 {
    margin: 0;
}

.hj-settings-overlay {
    position: absolute;
    inset: 0;
    background: var(--hj-overlay);
    cursor: pointer;
}

.hj-settings-content {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 100%;
    background: var(--hj-bg-elevated);
    border-left: 1px solid var(--hj-border);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.hj-settings-panel.open .hj-settings-content {
    transform: translateX(0);
}

.hj-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hj-border);
}

.hj-settings-header h2 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--hj-gold);
    margin: 0;
}

.hj-settings-close {
    width: 28px;
    height: 28px;
    border: 1px solid var(--hj-border);
    background: transparent;
    color: var(--hj-text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.hj-settings-close:hover {
    background: var(--hj-bg-hover);
    color: var(--hj-text);
    border-color: var(--hj-gold);
}

.hj-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
}

.hj-settings-section {
    margin-bottom: 1rem;
    /* Override global section styles from main.css */
    min-height: auto;
    padding: 0;
    display: block;
    animation: none;
}

.hj-settings-section h3 {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hj-text-tertiary);
    margin: 0 0 0.4rem 0;
}

/* Theme buttons */
.hj-theme-options {
    display: flex;
    gap: 0.3rem;
}

.hj-theme-btn {
    flex: 1;
    padding: 0.4rem;
    border: 1px solid var(--hj-border);
    background: var(--hj-bg-surface);
    color: var(--hj-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
    border-radius: 4px;
}

.hj-theme-btn:hover {
    background: var(--hj-bg-hover);
    color: var(--hj-text);
}

.hj-theme-btn.active {
    border-color: var(--hj-gold);
    background: var(--hj-gold-glow);
    color: var(--hj-gold);
}

/* Preset buttons */
.hj-presets-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
}

.hj-preset-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--hj-border);
    background: var(--hj-bg-surface);
    cursor: pointer;
    text-align: left;
    transition: all 0.1s ease;
    border-radius: 4px;
}

.hj-preset-btn:hover {
    background: var(--hj-bg-hover);
    border-color: var(--hj-gold-dim);
}

.hj-preset-btn.active {
    border-color: var(--hj-gold);
    background: var(--hj-gold-glow);
}

.hj-preset-btn-icon {
    font-size: 0.9rem;
    width: auto;
    flex-shrink: 0;
}

.hj-preset-btn-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hj-preset-btn-name {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--hj-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hj-preset-btn-desc {
    display: none;
}

/* Individual settings */
.hj-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--hj-border-subtle);
}

.hj-setting-row:last-child {
    border-bottom: none;
}

.hj-setting-row label {
    font-size: 0.75rem;
    color: var(--hj-text);
}

.hj-setting-row select {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--hj-border);
    background: var(--hj-bg-surface);
    color: var(--hj-text);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 3px;
}

.hj-setting-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--hj-gold);
    cursor: pointer;
}

/* Reset button */
.hj-reset-btn {
    width: 100%;
    padding: 0.4rem;
    border: 1px solid var(--hj-border);
    background: transparent;
    color: var(--hj-text-tertiary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.1s ease;
    border-radius: 4px;
}

.hj-reset-btn:hover {
    background: var(--hj-bg-hover);
    color: var(--hj-text-secondary);
}

/* ========================================
   WELCOME MODAL (First Visit)
   ======================================== */

.hj-welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hj-welcome-overlay {
    position: absolute;
    inset: 0;
    background: var(--hj-overlay);
    cursor: pointer;
}

.hj-welcome-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: var(--hj-bg);
    border: 1px solid var(--hj-border);
    padding: 2rem;
    animation: hj-modal-in 0.3s ease;
}

@keyframes hj-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.hj-welcome-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hj-welcome-icon {
    font-size: 2rem;
}

.hj-welcome-header h2 {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--hj-gold);
    margin: 0;
}

.hj-welcome-content > p {
    color: var(--hj-text-secondary);
    margin-bottom: 1.5rem;
}

.hj-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.hj-preset-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--hj-border);
    background: var(--hj-bg-surface);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.hj-preset-option:hover {
    border-color: var(--hj-gold);
    background: var(--hj-gold-glow);
}

.hj-preset-icon {
    font-size: 1.5rem;
}

.hj-preset-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--hj-text);
}

.hj-preset-desc {
    font-size: 0.7rem;
    color: var(--hj-text-secondary);
}

.hj-welcome-note {
    font-size: 0.75rem;
    color: var(--hj-text-tertiary);
    text-align: center;
    margin-bottom: 1rem;
}

.hj-welcome-skip {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--hj-border);
    background: transparent;
    color: var(--hj-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hj-welcome-skip:hover {
    background: var(--hj-bg-hover);
    color: var(--hj-text);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 480px) {
    .hj-settings-content {
        max-width: 100%;
    }

    .hj-preset-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hj-theme-options {
        flex-direction: column;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .hj-settings-trigger,
    .hj-settings-panel,
    .hj-welcome-modal {
        display: none !important;
    }
}

/* ========================================
   COLORBLIND ACCESSIBILITY MODES
   ======================================== */

/* Protanopia (Red-Blind) - shifts reds to more visible colors */
[data-colorblind="protanopia"] {
    filter: url('#protanopia-filter');
}

/* Deuteranopia (Green-Blind) - shifts greens to more visible colors */
[data-colorblind="deuteranopia"] {
    filter: url('#deuteranopia-filter');
}

/* Tritanopia (Blue-Blind) - shifts blues to more visible colors */
[data-colorblind="tritanopia"] {
    filter: url('#tritanopia-filter');
}

/* Achromatopsia (Complete Color Blindness) - high contrast grayscale */
[data-colorblind="achromatopsia"] {
    filter: grayscale(100%) contrast(1.2);
}

/* Large click targets mode */
[data-large-targets="true"] button,
[data-large-targets="true"] a,
[data-large-targets="true"] [role="button"] {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1rem;
}

/* Screen reader optimizations */
[data-screen-reader="true"] .decorative,
[data-screen-reader="true"] [aria-hidden="true"] {
    display: none;
}

/* ========================================
   COMING SOON BADGE
   ======================================== */

.hj-coming-soon-badge {
    display: inline-block;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.hj-preset-btn.coming-soon {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.hj-preset-btn.coming-soon:hover {
    background: var(--hj-bg-surface);
    border-color: var(--hj-border);
}

/* ========================================
   COLORBLIND SVG FILTERS (injected into DOM)
   ======================================== */

/*
 * These filters are approximations of how colorblind individuals see.
 * The actual correction is done by shifting problematic colors to
 * more distinguishable ranges.
 *
 * SVG filters should be injected via JavaScript:
 * <svg style="display:none">
 *   <defs>
 *     <filter id="protanopia-filter">...</filter>
 *   </defs>
 * </svg>
 */