/*
 * LinkBoosty Surface System v3
 * Shared clean-surface design tokens for workspace, auth, legal, cookie,
 * modal and special pages.
 *
 * Product rule: default cards/surfaces avoid decorative strokes. Use layered
 * backgrounds first, soft elevation only when a surface floats above context,
 * and preserve focus/selected/CTA state cues as functional affordances.
 */

:root {
    color-scheme: dark;

    /* Surface stack */
    --lb-surface-page: #111111;
    --lb-surface-shell: #1A1A1A;
    --lb-surface-card: #1F1F1F;
    --lb-surface-grouped: #161618;
    --lb-surface-control: #242424;
    --lb-surface-raised: #202020;
    --lb-surface-overlay: rgba(15, 15, 18, 0.56);

    /* Border policy */
    --lb-border-none: 0;
    --lb-border-subtle: rgba(255, 255, 255, 0.07);

    /* Radius scale */
    --lb-radius-xs: 8px;
    --lb-radius-sm: 12px;
    --lb-radius-md: 16px;
    --lb-radius-lg: 20px;
    --lb-radius-xl: 24px;
    --lb-radius-2xl: 28px;
    --lb-radius-pill: 999px;

    /* Elevation scale */
    --lb-shadow-none: none;
    --lb-shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.22);
    --lb-shadow-raised: 0 30px 72px rgba(0, 0, 0, 0.46);
    --lb-shadow-floating: 0 24px 64px rgba(0, 0, 0, 0.34);
    --lb-shadow-popover: 0 18px 42px rgba(0, 0, 0, 0.30);
    --lb-shadow-sidebar: 10px 0 24px rgba(0, 0, 0, 0.18);
    --lb-shadow-sidebar-control: 0 10px 22px rgba(0, 0, 0, 0.20);
    --lb-shadow-control: none;
    --lb-shadow-focus: 0 0 0 3px rgba(239, 68, 68, 0.16);
    --lb-shadow-selected: 0 0 0 3px rgba(239, 68, 68, 0.10);

    /* Semantic aliases */
    --lb-surface-shadow: var(--lb-shadow-none);
    --lb-surface-shadow-hover: var(--lb-shadow-none);
    --lb-surface-shadow-elevated: var(--lb-shadow-floating);
    --lb-focus-ring: var(--lb-shadow-focus);
    --lb-selected-bg: rgba(239, 68, 68, 0.10);
    --lb-selected-ring: 0 0 0 3px rgba(239, 68, 68, 0.10);
}

[data-theme="dark"] {
    color-scheme: dark;
    --lb-surface-page: #111111;
    --lb-surface-shell: #1A1A1A;
    --lb-surface-card: #1F1F1F;
    --lb-surface-grouped: #161618;
    --lb-surface-control: #242424;
    --lb-surface-raised: #202020;
    --lb-border-subtle: rgba(255, 255, 255, 0.07);
    --lb-shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.22);
    --lb-shadow-raised: 0 30px 72px rgba(0, 0, 0, 0.46);
    --lb-shadow-floating: 0 24px 64px rgba(0, 0, 0, 0.34);
    --lb-shadow-popover: 0 18px 42px rgba(0, 0, 0, 0.30);
    --lb-shadow-sidebar: 10px 0 24px rgba(0, 0, 0, 0.18);
    --lb-shadow-sidebar-control: 0 10px 22px rgba(0, 0, 0, 0.20);
}

[data-theme="light"] {
    color-scheme: light;
    --lb-surface-page: #f5f5f7;
    --lb-surface-shell: #ffffff;
    --lb-surface-card: #ffffff;
    --lb-surface-grouped: #f2f2f7;
    --lb-surface-control: #eef1f4;
    --lb-surface-raised: #ffffff;
    --lb-surface-overlay: rgba(15, 23, 42, 0.42);
    --lb-border-subtle: rgba(15, 23, 42, 0.08);
    --lb-shadow-soft: 0 16px 38px rgba(15, 23, 42, 0.07);
    --lb-shadow-raised: 0 28px 72px rgba(15, 23, 42, 0.12), 0 10px 26px rgba(15, 23, 42, 0.06);
    --lb-shadow-floating: 0 24px 64px rgba(15, 23, 42, 0.14), 0 8px 24px rgba(15, 23, 42, 0.08);
    --lb-shadow-popover: 0 18px 42px rgba(15, 23, 42, 0.14);
    --lb-shadow-sidebar: 12px 0 28px rgba(15, 23, 42, 0.06), 4px 0 12px rgba(15, 23, 42, 0.04);
    --lb-shadow-sidebar-control: 0 10px 22px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
    --lb-shadow-selected: 0 0 0 3px rgba(239, 68, 68, 0.12);
    --lb-selected-bg: rgba(239, 68, 68, 0.09);
    --lb-selected-ring: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.lb-surface-card {
    border: var(--lb-border-none);
    border-radius: var(--lb-radius-xl);
    background: var(--lb-surface-card);
    box-shadow: var(--lb-surface-shadow);
}

.lb-surface-floating {
    border: var(--lb-border-none);
    border-radius: var(--lb-radius-xl);
    background: var(--lb-surface-raised);
    box-shadow: var(--lb-surface-shadow-elevated);
}

/*
 * No-stroke component normalization
 * Keep functional states through backgrounds/rings, not decorative outlines.
 */
.sidebar-collapse-toggle,
.sidebar-collapse-handle,
.sidebar-mobile-toggle,
.sidebar-mobile-close,
.workspace-mobile-brand-mark,
.theme-toggle,
.footer-icon-btn,
.home-quick-mode,
.home-quick-mode-btn,
.home-quick-input-row,
.home-quick-input,
.home-shortcut-icon,
.home-guide-icon,
.access-history-pagination .btn-secondary,
.lb-modal__actions .btn-primary,
.lb-modal__actions .btn-secondary,
.lb-modal__actions .btn-large,
.form-actions.lb-modal__actions .btn-primary,
.form-actions.lb-modal__actions .btn-secondary,
.create-link-modal-actions.lb-modal__actions .btn-primary,
.create-link-modal-actions.lb-modal__actions .btn-secondary,
.profile-v2-modal-actions.lb-modal__actions .btn-primary,
.profile-v2-modal-actions.lb-modal__actions .btn-secondary,
.ss-modal-actions.lb-modal__actions .btn-primary,
.ss-modal-actions.lb-modal__actions .btn-secondary {
    border: 0 !important;
    box-shadow: none !important;
}

.ss-modal,
.ss-modal-surface-v4 {
    border: 0 !important;
    box-shadow: var(--lb-shadow-floating, 0 18px 42px rgba(0, 0, 0, 0.24)) !important;
}

.sidebar-collapse-toggle,
.sidebar-collapse-handle,
.sidebar-mobile-toggle,
.sidebar-mobile-close,
.workspace-mobile-brand-mark,
.theme-toggle,
.footer-icon-btn,
.home-quick-mode-btn.is-active,
.home-quick-input,
.home-shortcut-icon,
.home-guide-icon,
.access-history-pagination .btn-secondary,
.lb-modal__actions .btn-secondary {
    background: var(--lb-surface-control, var(--bg-secondary)) !important;
}

.home-quick-mode,
.home-shortcut-tile,
.home-guide-item,
.access-history-pagination .btn-secondary:hover:not(:disabled),
.lb-modal__actions .btn-secondary:hover:not(:disabled) {
    background: var(--lb-surface-grouped, var(--bg-grouped, var(--bg-primary))) !important;
}

.sidebar-collapse-toggle:hover,
.sidebar-collapse-handle:hover,
.sidebar-mobile-toggle:hover,
.sidebar-mobile-close:hover,
.theme-toggle:hover,
.footer-icon-btn:hover,
.home-quick-mode-btn:hover,
.home-shortcut-tile:hover,
.home-guide-item:hover {
    border-color: transparent !important;
    box-shadow: none !important;
}

.sidebar-collapse-toggle:focus-visible,
.sidebar-collapse-handle:focus-visible,
.sidebar-mobile-toggle:focus-visible,
.sidebar-mobile-close:focus-visible,
.theme-toggle:focus-visible,
.footer-icon-btn:focus-visible,
.home-quick-mode-btn:focus-visible,
.home-quick-input:focus-visible,
.home-shortcut-tile:focus-visible,
.home-guide-item:focus-visible,
.access-history-pagination .btn-secondary:focus-visible,
.lb-modal__actions .btn-primary:focus-visible,
.lb-modal__actions .btn-secondary:focus-visible {
    outline: none !important;
    box-shadow: var(--lb-focus-ring, 0 0 0 3px var(--primary-light)) !important;
}

.home-quick-input:focus,
.lb-modal__actions .btn-secondary:focus-visible {
    border-color: transparent !important;
}

[data-theme="light"] .home-quick-mode .home-quick-mode-btn.is-active {
    background: var(--lb-surface-card, #ffffff) !important;
}

[data-theme="light"] .home-quick-mode .home-quick-mode-btn.is-active:not(:focus-visible),
[data-theme="light"] .home-quick-mode .home-quick-mode-btn.is-active:hover:not(:focus-visible) {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.sidebar-collapse-toggle.sidebar-collapse-handle:not(:focus-visible),
.sidebar-collapse-toggle.sidebar-collapse-handle:hover:not(:focus-visible) {
    box-shadow: var(--lb-shadow-sidebar-control, 0 10px 22px rgba(0, 0, 0, 0.20)) !important;
}