/* ===================================================================
   Editor Theme — "Dark Atelier"
   A refined dark workshop aesthetic for the WYSIWYG visual editor.
   Opaque dark surfaces for persistent chrome (toolbar, sidebar, status),
   glass morphism for ephemeral overlays (modals, tooltips, context menus).

   All editor components consume these tokens exclusively —
   never hardcode colors in editor component CSS.
   =================================================================== */

/* ── Design Tokens ─────────────────────────────────────────────────── */

:root {
    /* ── Surface Hierarchy ──
       From deepest (recessed inputs) to most elevated (active states).
       Each step is intentionally small for subtle depth layering. */
    --editor-bg-deep:      #11111b;
    --editor-bg-primary:   #1e1e2e;
    --editor-bg-secondary: #181825;
    --editor-bg-tertiary:  #313244;
    --editor-bg-hover:     #45475a;
    --editor-bg-active:    #585b70;
    --editor-bg-elevated:  #3b3d52;

    /* ── Text Hierarchy ──
       Four levels: primary (labels, values), secondary (descriptions),
       muted (placeholders, disabled), on-accent (text on gold buttons). */
    --editor-text-primary:   #cdd6f4;
    --editor-text-secondary: #a6adc8;
    --editor-text-muted:     #6c7086;
    --editor-text-on-accent: #1e1e2e;
    --editor-text-inverse:   #11111b;

    /* ── Border System ──
       Subtle by default, progressively more visible on interaction. */
    --editor-border:         #313244;
    --editor-border-subtle:  rgba(49, 50, 68, 0.6);
    --editor-border-hover:   #45475a;
    --editor-border-focus:   var(--color-gold, #d4b896);
    --editor-border-active:  var(--color-gold, #d4b896);

    /* ── Accent Colors ──
       Derived from the wedding design system. Gold is the primary accent
       (CTAs, focus rings, active states). Forest/sage as secondary. */
    --editor-accent:          var(--color-gold, #d4b896);
    --editor-accent-hover:    var(--color-accent, #c9b8a8);
    --editor-accent-muted:    rgba(212, 184, 150, 0.15);
    --editor-accent-subtle:   rgba(212, 184, 150, 0.08);
    --editor-accent-glow:     rgba(212, 184, 150, 0.25);
    --editor-forest:          var(--color-forest, #3D5941);
    --editor-sage:            var(--color-sage, #b5c4b1);
    --editor-sage-muted:      rgba(181, 196, 177, 0.15);

    /* ── Semantic Colors ──
       Soft pastels that harmonize with the dark background. */
    --editor-danger:          #f38ba8;
    --editor-danger-muted:    rgba(243, 139, 168, 0.15);
    --editor-danger-hover:    #f9a8bd;
    --editor-success:         #a6e3a1;
    --editor-success-muted:   rgba(166, 227, 161, 0.15);
    --editor-warning:         #fab387;
    --editor-warning-muted:   rgba(250, 179, 135, 0.15);
    --editor-info:            #89b4fa;
    --editor-info-muted:      rgba(137, 180, 250, 0.15);

    /* ── Glass Morphism ──
       For ephemeral UI: modals, tooltips, context menus, floating panels. */
    --editor-glass-bg:        rgba(30, 30, 46, 0.82);
    --editor-glass-bg-heavy:  rgba(24, 24, 37, 0.92);
    --editor-glass-blur:      20px;
    --editor-glass-blur-light: 12px;
    --editor-glass-border:    rgba(205, 214, 244, 0.08);
    --editor-glass-border-hover: rgba(205, 214, 244, 0.15);
    --editor-glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);

    /* ── Sizing Tokens ── */
    --editor-sidebar-width:    340px;
    --editor-toolbar-height:   48px;
    --editor-statusbar-height: 28px;
    --editor-toolrail-width:   112px;
    --editor-panel-radius:     8px;
    --editor-panel-radius-lg:  12px;
    --editor-input-height:     30px;
    --editor-btn-height:       30px;
    --editor-icon-size:        18px;
    --editor-icon-size-sm:     14px;
    --editor-section-gap:      12px;
    --editor-field-gap:        8px;

    /* ── Transitions ── */
    --editor-transition-fast:  0.12s ease;
    --editor-transition:       0.18s ease;
    --editor-transition-slow:  0.3s ease-out;
    --editor-transition-panel: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Shadows ── */
    --editor-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.15);
    --editor-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
    --editor-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15);
    --editor-shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    --editor-shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.25);
    --editor-shadow-glow: 0 0 12px var(--editor-accent-glow), 0 0 4px var(--editor-accent-glow);
    --editor-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.2);

    /* ── Z-Index Scale ──
       Structured layers to prevent stacking conflicts. */
    --editor-z-canvas:     1;
    --editor-z-effects:    10;
    --editor-z-handles:    100;
    --editor-z-toolrail:   9999;
    --editor-z-sidebar:    9999;
    --editor-z-toolbar:    10000;
    --editor-z-statusbar:  9999;
    --editor-z-float:      10001;
    --editor-z-modal:      10002;
    --editor-z-tooltip:    10003;
    --editor-z-context:    10004;
    --editor-z-dialog:     10010;
}


/* ===================================================================
   COMPONENT TOKENS — Reusable patterns for editor UI elements
   =================================================================== */

/* ── Buttons ─────────────────────────────────────────────────────── */

.editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--editor-btn-height);
    padding: 0 12px;
    border: 1px solid var(--editor-border);
    border-radius: 6px;
    background: transparent;
    color: var(--editor-text-primary);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
        background var(--editor-transition-fast),
        border-color var(--editor-transition-fast),
        color var(--editor-transition-fast),
        box-shadow var(--editor-transition-fast);
}

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

.editor-btn:active {
    background: var(--editor-bg-active);
}

.editor-btn:focus-visible {
    outline: 2px solid var(--editor-accent);
    outline-offset: 2px;
}

.editor-btn:disabled,
.editor-btn[aria-disabled="true"] {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}

/* Primary — Gold accent, used for Save and primary CTAs */
.editor-btn--primary {
    background: var(--editor-accent);
    border-color: var(--editor-accent);
    color: var(--editor-text-on-accent);
    font-weight: 600;
}

.editor-btn--primary:hover {
    background: var(--editor-accent-hover);
    border-color: var(--editor-accent-hover);
    color: var(--editor-text-on-accent);
    box-shadow: var(--editor-shadow-glow);
}

.editor-btn--primary:active {
    background: var(--editor-accent);
    box-shadow: var(--editor-shadow-glow), var(--editor-shadow-inset);
}

/* Danger — Red, used for Delete and destructive actions */
.editor-btn--danger {
    color: var(--editor-danger);
    border-color: rgba(243, 139, 168, 0.3);
}

.editor-btn--danger:hover {
    background: var(--editor-danger-muted);
    border-color: var(--editor-danger);
    color: var(--editor-danger);
}

/* Ghost — No border, minimal presence */
.editor-btn--ghost {
    border-color: transparent;
    background: transparent;
}

.editor-btn--ghost:hover {
    background: var(--editor-bg-hover);
    border-color: transparent;
}

/* Toggle — Active state for mode buttons (Orbit, Edit, etc.) */
.editor-btn--active,
.editor-btn[aria-pressed="true"] {
    background: var(--editor-accent-muted);
    border-color: var(--editor-accent);
    color: var(--editor-accent);
}

/* Icon-only — Square button for tool rail and compact actions */
.editor-btn--icon {
    width: var(--editor-btn-height);
    padding: 0;
    border-radius: 6px;
}

.editor-btn--icon svg {
    width: var(--editor-icon-size);
    height: var(--editor-icon-size);
}

/* Small — Compact buttons for inline actions */
.editor-btn--sm {
    height: 24px;
    padding: 0 8px;
    font-size: 0.72rem;
    border-radius: 4px;
}


/* ── Form Inputs ──────────────────────────────────────────────────── */

.editor-input {
    display: block;
    width: 100%;
    height: var(--editor-input-height);
    padding: 0 8px;
    border: 1px solid var(--editor-border);
    border-radius: 6px;
    background: var(--editor-bg-deep);
    color: var(--editor-text-primary);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.78rem;
    line-height: var(--editor-input-height);
    transition:
        border-color var(--editor-transition-fast),
        box-shadow var(--editor-transition-fast);
}

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

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

.editor-input:focus {
    outline: none;
    border-color: var(--editor-accent);
    box-shadow: 0 0 0 2px var(--editor-accent-muted);
}

.editor-input:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Number inputs — slightly narrower */
.editor-input--number {
    width: 70px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Select dropdowns */
.editor-select {
    appearance: none;
    display: block;
    width: 100%;
    height: var(--editor-input-height);
    padding: 0 28px 0 8px;
    border: 1px solid var(--editor-border);
    border-radius: 6px;
    background: var(--editor-bg-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236c7086' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    color: var(--editor-text-primary);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.78rem;
    cursor: pointer;
    transition:
        border-color var(--editor-transition-fast),
        box-shadow var(--editor-transition-fast);
}

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

.editor-select:focus {
    outline: none;
    border-color: var(--editor-accent);
    box-shadow: 0 0 0 2px var(--editor-accent-muted);
}

/* Color picker */
.editor-color-input {
    width: 36px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--editor-border);
    border-radius: 6px;
    background: var(--editor-bg-deep);
    cursor: pointer;
    transition: border-color var(--editor-transition-fast);
}

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

.editor-color-input:focus {
    outline: none;
    border-color: var(--editor-accent);
}

/* Range sliders */
.editor-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--editor-bg-tertiary);
    outline: none;
    transition: background var(--editor-transition-fast);
}

.editor-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--editor-accent);
    border: 2px solid var(--editor-bg-primary);
    cursor: pointer;
    box-shadow: var(--editor-shadow-xs);
    transition:
        transform var(--editor-transition-fast),
        box-shadow var(--editor-transition-fast);
}

.editor-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: var(--editor-shadow-glow);
}

.editor-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--editor-accent);
    border: 2px solid var(--editor-bg-primary);
    cursor: pointer;
}

.editor-range:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--editor-accent);
    outline-offset: 2px;
}

/* Checkbox */
.editor-checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid var(--editor-border);
    border-radius: 4px;
    background: var(--editor-bg-deep);
    cursor: pointer;
    accent-color: var(--editor-accent);
    transition: border-color var(--editor-transition-fast);
}

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

.editor-checkbox:checked {
    background: var(--editor-accent);
    border-color: var(--editor-accent);
}


/* ── Panel / Section Structure ────────────────────────────────────── */

.editor-section {
    border-bottom: 1px solid var(--editor-border-subtle);
}

.editor-section:last-child {
    border-bottom: none;
}

.editor-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--editor-text-secondary);
    transition:
        background var(--editor-transition-fast),
        color var(--editor-transition-fast);
}

.editor-section__header:hover {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
}

.editor-section__header--active {
    color: var(--editor-accent);
}

.editor-section__chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform var(--editor-transition);
    color: var(--editor-text-muted);
}

.editor-section__chevron--open {
    transform: rotate(90deg);
}

.editor-section__badge {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--editor-bg-tertiary);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--editor-text-muted);
    font-variant-numeric: tabular-nums;
}

.editor-section__body {
    padding: 8px 14px 14px;
}

/* Field rows within sections */
.editor-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.editor-field + .editor-field {
    margin-top: var(--editor-field-gap);
}

.editor-field__label {
    flex-shrink: 0;
    width: 72px;
    font-size: 0.73rem;
    color: var(--editor-text-secondary);
    user-select: none;
}

.editor-field__value {
    flex: 1;
    min-width: 0;
}

.editor-field__unit {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: var(--editor-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

/* Range field with live value display */
.editor-range-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-range-field__slider {
    flex: 1;
}

.editor-range-field__display {
    flex-shrink: 0;
    min-width: 44px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--editor-text-secondary);
    text-align: right;
}


/* ── Badges & Pills ───────────────────────────────────────────────── */

.editor-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.editor-badge--default {
    background: var(--editor-bg-tertiary);
    color: var(--editor-text-secondary);
}

.editor-badge--accent {
    background: var(--editor-accent-muted);
    color: var(--editor-accent);
}

.editor-badge--success {
    background: var(--editor-success-muted);
    color: var(--editor-success);
}

.editor-badge--danger {
    background: var(--editor-danger-muted);
    color: var(--editor-danger);
}

.editor-badge--warning {
    background: var(--editor-warning-muted);
    color: var(--editor-warning);
}

.editor-badge--info {
    background: var(--editor-info-muted);
    color: var(--editor-info);
}


/* ── Tooltips (Glass Morphism) ────────────────────────────────────── */

.editor-tooltip {
    position: absolute;
    z-index: var(--editor-z-tooltip);
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--editor-glass-bg-heavy);
    backdrop-filter: blur(var(--editor-glass-blur));
    -webkit-backdrop-filter: blur(var(--editor-glass-blur));
    border: 1px solid var(--editor-glass-border);
    box-shadow: var(--editor-shadow-md);
    color: var(--editor-text-primary);
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity var(--editor-transition-fast),
        transform var(--editor-transition-fast);
}

.editor-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

.editor-tooltip__shortcut {
    margin-left: 8px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--editor-bg-tertiary);
    font-size: 0.65rem;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    color: var(--editor-text-muted);
}


/* ── Dividers ─────────────────────────────────────────────────────── */

.editor-divider {
    height: 1px;
    border: none;
    background: var(--editor-border-subtle);
    margin: 0;
}

.editor-divider--spaced {
    margin: 8px 0;
}

.editor-divider--vertical {
    width: 1px;
    height: 24px;
    background: var(--editor-border);
    flex-shrink: 0;
}


/* ── Focus Ring ───────────────────────────────────────────────────── */

.editor-focus-ring:focus-visible {
    outline: 2px solid var(--editor-accent);
    outline-offset: 2px;
}


/* ── Selection Text ───────────────────────────────────────────────── */

.editor-shell ::selection {
    background: var(--editor-accent-muted);
    color: var(--editor-text-primary);
}


/* ── Disabled State ───────────────────────────────────────────────── */

.editor-disabled,
[data-editor-disabled] {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}


/* ── Scrollbar (Thin, Matching Theme) ─────────────────────────────── */

.editor-scrollable {
    scrollbar-width: thin;
    scrollbar-color: var(--editor-bg-hover) transparent;
}

.editor-scrollable::-webkit-scrollbar {
    width: 5px;
}

.editor-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.editor-scrollable::-webkit-scrollbar-thumb {
    background: var(--editor-bg-hover);
    border-radius: 3px;
}

.editor-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--editor-bg-active);
}


/* ── Viewport Override Indicator ──────────────────────────────────── */

.editor-override-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--editor-bg-hover);
    flex-shrink: 0;
    transition:
        background var(--editor-transition-fast),
        box-shadow var(--editor-transition-fast);
}

.editor-override-dot--active {
    background: var(--editor-accent);
    box-shadow: 0 0 6px var(--editor-accent-glow);
}

.editor-override-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(212, 184, 150, 0.4);
    background: var(--editor-accent-muted);
    color: var(--editor-accent);
    font-size: 0.6rem;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background var(--editor-transition-fast),
        border-color var(--editor-transition-fast);
}

.editor-override-reset:hover {
    background: rgba(212, 184, 150, 0.25);
    border-color: var(--editor-accent);
}


/* ── Empty States ─────────────────────────────────────────────────── */

.editor-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--editor-text-muted);
    font-size: 0.78rem;
}

.editor-empty__icon {
    display: block;
    margin: 0 auto 8px;
    width: 32px;
    height: 32px;
    opacity: 0.4;
}

.editor-empty__hint {
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--editor-text-muted);
}


/* ── Loading Spinner ──────────────────────────────────────────────── */

@keyframes editor-spin {
    to { transform: rotate(360deg); }
}

.editor-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--editor-border);
    border-top-color: var(--editor-accent);
    border-radius: 50%;
    animation: editor-spin 0.6s linear infinite;
}

.editor-spinner--sm {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
}


/* ── Confirmation / Save Feedback ─────────────────────────────────── */

@keyframes editor-saved-fade {
    0%, 60% { opacity: 1; }
    100%    { opacity: 0; }
}

.editor-saved-msg {
    font-size: 0.72rem;
    color: var(--editor-success);
    animation: editor-saved-fade 2s ease-out forwards;
}


/* ── Responsive Sizing Tokens ────────────────────────────────────── */

@media (max-width: 992px) {
    :root {
        --editor-sidebar-width: 0px;
    }
}

@media (max-width: 768px) {
    :root {
        --editor-sidebar-width: 0px;
        --editor-toolrail-width: 0px;
        --editor-toolbar-height: auto;
        --editor-statusbar-height: 0px;
        --editor-btn-height: 36px;
        --editor-input-height: 36px;
    }
}

@media (max-width: 375px) {
    :root {
        --editor-btn-height: 44px;
        --editor-input-height: 44px;
    }
}


/* ── Reduced Motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .editor-btn,
    .editor-input,
    .editor-select,
    .editor-range,
    .editor-section__chevron,
    .editor-tooltip,
    .editor-spinner {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}