/*
 * Lab Design System (LDS) — shared foundations + classic color roles.
 * Spec: docs/lab_design_system_spec.md · Phase 0 map: docs/lab_design_system_phase0.md
 *
 * Theme = token values only (`data-lab-theme`). Components stay in surface CSS.
 * Phase 1: classic values match current DEMS labd.css :root as-is (zero visual change).
 * Official skin values land in phase 4 — do not fork this file per theme.
 */

/* -------------------------------------------------------------------------- */
/* Shared foundations (all surfaces)                                          */
/* -------------------------------------------------------------------------- */

:root {
    /* Spacing scale — 4 / 8 / 12 / 16 / 24 / 32 / 48 */
    --lab-space-1: 4px;
    --lab-space-2: 8px;
    --lab-space-3: 12px;
    --lab-space-4: 16px;
    --lab-space-5: 24px;
    --lab-space-6: 32px;
    --lab-space-7: 48px;
    --lab-hairline-w: 1px;

    /* Page gutters */
    --lab-gutter: var(--lab-space-4);
    --lab-gutter-md: var(--lab-space-5);

    /* Control heights (tap target md ≥ 44) */
    --lab-control-h-sm: 36px;
    --lab-control-h-md: 44px;
    --lab-control-h-lg: 52px;

    /* Radius */
    --lab-radius-sm: 8px;
    --lab-radius-md: 12px;
    --lab-radius-lg: 16px;
    --lab-radius-pill: 999px;

    /* Z-index ladder */
    --lab-z-base: 1;
    --lab-z-header: 40;
    --lab-z-sheet: 80;
    --lab-z-toast: 90;
    --lab-z-gate: 100;

    /* Motion */
    --lab-motion-fast: 140ms;
    --lab-motion-sheet: 280ms;
    --lab-motion-fade: 200ms;
    --lab-marquee-ms: 8s;
    --lab-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

    /* Safe area — Telegram/TWA may override via html[data-tg-safe] */
    --lab-safe-top: env(safe-area-inset-top, 0px);
    --lab-safe-bottom: env(safe-area-inset-bottom, 0px);
    --lab-safe-left: env(safe-area-inset-left, 0px);
    --lab-safe-right: env(safe-area-inset-right, 0px);

    /* Focus ring */
    --lab-focus-ring: 0 0 0 2px rgba(124, 246, 10, 0.55);

    /* Type stack (surfaces may override --lab-font) */
    --lab-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lab-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Type roles — size / weight / line-height / letter-spacing */
    --lab-type-display-size: 28px;
    --lab-type-display-weight: 700;
    --lab-type-display-lh: 1.15;
    --lab-type-display-ls: -0.02em;

    --lab-type-title-size: 18px;
    --lab-type-title-weight: 650;
    --lab-type-title-lh: 1.25;
    --lab-type-title-ls: 0;

    --lab-type-body-size: 15px;
    --lab-type-body-weight: 400;
    --lab-type-body-lh: 1.4;
    --lab-type-body-ls: 0;

    --lab-type-label-size: 13px;
    --lab-type-label-weight: 600;
    --lab-type-label-lh: 1.2;
    --lab-type-label-ls: 0.01em;

    --lab-type-caption-size: 11px;
    --lab-type-caption-weight: 500;
    --lab-type-caption-lh: 1.25;
    --lab-type-caption-ls: 0.01em;

    --lab-type-mono-size: 13px;
    --lab-type-mono-weight: 500;
    --lab-type-mono-lh: 1.3;
    --lab-type-mono-ls: 0;

    /* Шкала чистого серого: без синевы и тепла, от чёрного до белого. */
    --lab-gray-0: #000000;
    --lab-gray-1: #0f0f0f;
    --lab-gray-2: #1f1f1f;
    --lab-gray-3: #2e2e2e;
    --lab-gray-4: #404040;
    --lab-gray-5: #595959;
    --lab-gray-6: #737373;
    --lab-gray-7: #8c8c8c;
    --lab-gray-8: #b3b3b3;
    --lab-gray-9: #d9d9d9;
    --lab-gray-10: #ffffff;

    /* Текст на нейтральных поверхностях */
    --lab-neutral-fg: var(--lab-gray-10);
    --lab-neutral-fg-muted: var(--lab-gray-8);
    --lab-neutral-fg-subtle: var(--lab-gray-7);

    /* Обводка выбранного элемента и фокуса: один белый, без зелёного. Заливка едва заметная. */
    --lab-selected-border: rgba(255, 255, 255, 0.92);
    --lab-selected-bg: rgba(255, 255, 255, 0.06);

    /* Semantic feedback (shared; classic hex match DEMS ad-hoc usage) */
    --lab-danger: #ff3b30;
    --lab-success: #7cf60a;

    /* Icon button (one close everywhere) */
    --lab-icon-btn-size-sm: 34px;
    --lab-icon-btn-size-md: 40px;
    --lab-icon-btn-bg: rgba(255, 255, 255, 0.05);
    --lab-icon-btn-border: rgba(255, 255, 255, 0.18);
    --lab-icon-btn-fg: #f3f5f8;

    /* Review / sentiment chips (Понравилось / Улучшить) */
    --lab-chip-liked-fg: #b7f06a;
    --lab-chip-liked-bg: rgba(124, 246, 10, 0.12);
    --lab-chip-liked-border: rgba(124, 246, 10, 0.22);
    --lab-chip-improve-fg: #ffc27a;
    --lab-chip-improve-bg: rgba(255, 160, 60, 0.12);
    --lab-chip-improve-border: rgba(255, 160, 60, 0.22);

    /* Avatar tints (fire / ok / raw tokens in comments) */
    --lab-avatar-tint-fire-bg: rgba(255, 120, 60, 0.16);
    --lab-avatar-tint-fire-border: rgba(255, 140, 80, 0.35);
    --lab-avatar-tint-ok-bg: rgba(90, 160, 255, 0.16);
    --lab-avatar-tint-ok-border: rgba(110, 170, 255, 0.35);
    --lab-avatar-tint-raw-bg: rgba(160, 220, 90, 0.14);
    --lab-avatar-tint-raw-border: rgba(160, 220, 90, 0.32);

    /* Field / composer */
    --lab-field-bg: rgba(255, 255, 255, 0.06);
    --lab-field-border: rgba(255, 255, 255, 0.12);
    --lab-field-fg: #f3f5f8;
    --lab-field-placeholder: rgba(226, 230, 238, 0.4);

    /* Sheet / modal scrim */
    --lab-scrim: rgba(0, 0, 0, 0.55);
    --lab-sheet-radius-top: 22px;

    /* Inverse / follow pill (white → ghost when following) */
    --lab-btn-inverse-bg: #ffffff;
    --lab-btn-inverse-fg: #12141a;
    --lab-btn-inverse-border: transparent;
    --lab-btn-inverse-following-bg: transparent;
    --lab-btn-inverse-following-fg: #f3f5f8;
    --lab-btn-inverse-following-border: rgba(255, 255, 255, 0.22);
    --lab-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Status / rank glass pill chrome (color via currentColor / product mods) */
    --lab-pill-glass-bg:
        radial-gradient(64% 150% at 50% 50%, color-mix(in srgb, currentColor 22%, transparent) 0%, transparent 75%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
        linear-gradient(180deg, rgba(10, 11, 14, 0.92), rgba(5, 6, 8, 0.92));
    --lab-pill-glass-border: var(--lab-border-strong, rgba(255, 255, 255, 0.18));
    --lab-pill-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* List rows */
    --lab-list-divider: var(--lab-hairline, rgba(255, 255, 255, 0.07));

    /* Cover / thumb */
    --lab-cover-radius: 12px;
    --lab-cover-bg: #1a1c24;
    --lab-cover-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    --lab-cover-fallback:
        radial-gradient(circle at 35% 25%, rgba(124, 246, 10, 0.1), transparent 60%),
        var(--lab-cover-bg);

    /* Page backgrounds — atmosphere (boot/feed) vs solid (profile/artist) */
    --lab-page-bg-solid: #000000;
    --lab-page-bg-atmosphere:
        radial-gradient(ellipse 90% 60% at 12% -8%, rgba(91, 140, 255, 0.1), transparent 55%),
        radial-gradient(ellipse 75% 55% at 105% 2%, rgba(139, 124, 255, 0.08), transparent 55%),
        radial-gradient(ellipse 70% 55% at 50% 118%, rgba(124, 246, 10, 0.05), transparent 62%),
        linear-gradient(180deg, var(--lab-bg-2) 0%, var(--lab-bg-1) 45%, var(--lab-bg-0) 100%);
}

@media (min-width: 768px) {
    :root {
        --lab-gutter: var(--lab-gutter-md);
    }
}

html[data-tg-safe="1"] {
    --lab-safe-top: var(--app-safe-top, 0px);
    --lab-safe-bottom: var(--app-safe-bottom, 0px);
    --lab-safe-left: var(--app-safe-left, 0px);
    --lab-safe-right: var(--app-safe-right, 0px);
}

/* -------------------------------------------------------------------------- */
/* Classic skin — color / surface / elevation (DEMS current look)             */
/* Default = classic. Explicit [data-lab-theme=classic] for clarity.          */
/* -------------------------------------------------------------------------- */

:root,
[data-lab-theme="classic"] {
    /* Layered dark background */
    --lab-bg-0: #09090b;
    --lab-bg-1: #0d1018;
    --lab-bg-2: #131722;
    --lab-bg: var(--lab-bg-1);

    /* Text */
    --lab-fg: #f3f5f8;
    --lab-fg-muted: rgba(226, 230, 238, 0.62);
    --lab-fg-subtle: rgba(226, 230, 238, 0.4);
    --lab-fg-faint: rgba(255, 255, 255, 0.34);

    /* Brand green: accent-only */
    --lab-accent: #7cf60a;
    --lab-accent-strong: #a4ff4d;
    --lab-accent-deep: #4bb800;
    --lab-accent-soft: rgba(124, 246, 10, 0.14);
    --lab-accent-glow: rgba(124, 246, 10, 0.35);
    --lab-accent-ink: #07170a;

    /* Atmospheric lighting (not loud UI chrome) */
    --lab-atmos-blue: #5b8cff;
    --lab-atmos-indigo: #8b7cff;
    --lab-atmos-purple: #b26cf0;

    /* Glass / borders */
    --lab-glass: rgba(255, 255, 255, 0.05);
    --lab-glass-strong: rgba(255, 255, 255, 0.09);
    --lab-border: rgba(255, 255, 255, 0.12);
    --lab-border-strong: rgba(255, 255, 255, 0.18);
    --lab-hairline: rgba(255, 255, 255, 0.07);

    /* Primary CTA gradient */
    --lab-cta-from: #a3e05f;
    --lab-cta-via: #74ac3f;
    --lab-cta-to: #3c6427;
    --lab-cta-border: rgba(185, 226, 140, 0.4);
    --lab-cta-ink: #f4fbe9;

    /* Surfaces */
    --lab-surface-card: linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.016) 45%, rgba(255, 255, 255, 0.04) 100%), linear-gradient(180deg, #171b26 0%, #12151e 100%);
    --lab-surface-card-quiet: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), linear-gradient(180deg, #12141c 0%, #0f1119 100%);
    --lab-surface-sheet: radial-gradient(120% 60% at 15% -10%, rgba(91, 140, 255, 0.09), transparent 55%), linear-gradient(180deg, #14161f 0%, #101219 100%);
    /* Шторки поверх ленты и плашка «На меня»: чистый серый из шкалы, без градиента. */
    --lab-surface-sheet-neutral: var(--lab-gray-1);
    --lab-surface-fill-neutral: var(--lab-gray-2);
    --lab-surface-fill-neutral-strong: var(--lab-gray-3);
    --lab-hairline-neutral: rgba(255, 255, 255, 0.08);

    /* Elevation */
    --lab-elevation-card: inset 1px 1px 0 rgba(255, 255, 255, 0.09), inset -1px 0 0 rgba(255, 255, 255, 0.02), 0 18px 40px -24px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.35);
    --lab-elevation-card-quiet: inset 1px 1px 0 rgba(255, 255, 255, 0.06), 0 10px 22px -16px rgba(0, 0, 0, 0.6);
    --lab-elevation-sheet: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 -20px 60px -30px rgba(0, 0, 0, 0.85), 0 -2px 0 rgba(0, 0, 0, 0.4);
}

/* DEMS accent button: solid fill (no gradient). from=via=to → linear-gradient collapses to one colour. */
[data-lab-surface="dems"][data-lab-theme="classic"],
[data-lab-surface="dems"][data-lab-theme="official"] {
    --lab-cta-from: #62c934;
    --lab-cta-via: #62c934;
    --lab-cta-to: #62c934;
    --lab-cta-border: transparent;
    --lab-cta-ink: #07170a;
    --lab-accent-2: #b082f7;
    --lab-focus-ring: 0 0 0 2px var(--lab-selected-border);

    /* Общий вид DEMS: чистый серый, плоские карточки, тонкая обводка */
    --lab-bg-0: var(--lab-gray-0);
    --lab-bg-1: var(--lab-gray-0);
    --lab-bg-2: var(--lab-gray-1);
    --lab-bg: var(--lab-gray-0);
    --lab-page-bg-atmosphere: var(--lab-gray-0);
    --lab-fg: var(--lab-neutral-fg);
    --lab-fg-muted: var(--lab-neutral-fg-muted);
    --lab-fg-subtle: var(--lab-neutral-fg-subtle);
    --lab-border: rgba(255, 255, 255, 0.12);
    --lab-border-strong: rgba(255, 255, 255, 0.14);
    --lab-surface-border: var(--lab-border-strong);
    --lab-surface-card: var(--lab-gray-1);
    --lab-surface-card-quiet: var(--lab-gray-1);
    --lab-surface-sheet: var(--lab-gray-1);
    --lab-elevation-card: none;
    --lab-elevation-card-quiet: none;
    --lab-elevation-sheet: none;
    --lab-cover-bg: var(--lab-gray-2);
    --lab-cover-fallback: var(--lab-gray-2);

    /* Понравилось / Улучшить: без цвета и без обводки */
    --lab-chip-liked-fg: var(--lab-gray-10);
    --lab-chip-liked-bg: var(--lab-gray-3);
    --lab-chip-liked-border: transparent;
    --lab-chip-improve-fg: var(--lab-gray-8);
    --lab-chip-improve-bg: var(--lab-gray-2);
    --lab-chip-improve-border: transparent;

    /* Эмодзи реакций: без заливки и обводки */
    --lab-avatar-tint-fire-bg: transparent;
    --lab-avatar-tint-fire-border: transparent;
    --lab-avatar-tint-ok-bg: transparent;
    --lab-avatar-tint-ok-border: transparent;
    --lab-avatar-tint-raw-bg: transparent;
    --lab-avatar-tint-raw-border: transparent;
}

/* DEMS surface font + chrome sizes (product; classic values) */
[data-lab-surface="dems"],
:root {
    --lab-font-dems: 'Benzin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lab-header-h: 56px;
    --lab-header-offset: calc(var(--lab-header-h) + var(--lab-safe-top));
    --lab-dems-feed-bar-h: 44px;
    --lab-dems-compose-h: 72px;
    --lab-dems-compose-space: calc(var(--lab-dems-compose-h) + var(--lab-safe-bottom));
    --lab-dems-artist-player-h: 72px;
    --lab-dems-artist-player-space: calc(var(--lab-dems-artist-player-h) + var(--lab-safe-bottom));
}

/* DEMS semantic ranks / statuses — stay product tokens (classic palette) */
[data-lab-surface="dems"],
:root {
    --lab-dems-rank-novice: #9aa3b0;
    --lab-dems-rank-promising: #6fa8ff;
    --lab-dems-rank-lab-artist: #7cf60a;
    --lab-dems-rank-studio-choice: #f0c25e;

    --lab-dems-status-novice: #9aa3b0;
    --lab-dems-status-advanced: #6fa8ff;
    --lab-dems-status-producer: #7cf60a;
    --lab-dems-status-sound_master: #f0c25e;
    --lab-dems-status-freshman: #5eead4;
    --lab-dems-status-next_up: #fb923c;
    --lab-dems-status-headliner: #f5d07a;
    --lab-dems-status-legend: #f472b6;
    --lab-dems-status-gigachad: #d8c8ff;
    --lab-dems-status-goat_1: #dfe5ec;
    --lab-dems-status-goat_2: #f5c45c;
    --lab-dems-status-goat_3: #ff4a12;
    --lab-dems-status-secret_100k: rgba(255, 255, 255, 0.35);
}

/*
 * Official skin (phase 4) — quieter / more “label” DEMS layer.
 * Same roles as classic; product ranks/status stay shared (not recolored here).
 * Preview gate: staging ?theme= / allowlist; prod allowlist only (lab_theme.js).
 */
[data-lab-theme="official"] {
    --lab-bg-0: #06070b;
    --lab-bg-1: #0a0d13;
    --lab-bg-2: #10151e;
    --lab-bg: var(--lab-bg-1);

    --lab-fg: #e8ecf3;
    --lab-fg-muted: rgba(214, 222, 234, 0.56);
    --lab-fg-subtle: rgba(214, 222, 234, 0.36);
    --lab-fg-faint: rgba(255, 255, 255, 0.26);

    /* Accent: less neon, still Lab green */
    --lab-accent: #62c934;
    --lab-accent-strong: #7fe04a;
    --lab-accent-deep: #358a16;
    --lab-accent-soft: rgba(98, 201, 52, 0.11);
    --lab-accent-glow: rgba(98, 201, 52, 0.24);
    --lab-accent-ink: #051107;

    --lab-atmos-blue: #4570d4;
    --lab-atmos-indigo: #6f64d0;
    --lab-atmos-purple: #8f56c4;

    --lab-glass: rgba(255, 255, 255, 0.035);
    --lab-glass-strong: rgba(255, 255, 255, 0.065);
    --lab-border: rgba(255, 255, 255, 0.09);
    --lab-border-strong: rgba(255, 255, 255, 0.14);
    --lab-hairline: rgba(255, 255, 255, 0.055);

    /* CTA: matte, less glow */
    --lab-cta-from: #6fad42;
    --lab-cta-via: #528230;
    --lab-cta-to: #2a4719;
    --lab-cta-border: rgba(150, 190, 110, 0.32);
    --lab-cta-ink: #eef6e6;

    --lab-surface-card: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 48%, rgba(255, 255, 255, 0.028) 100%), linear-gradient(180deg, #141820 0%, #0f131a 100%);
    --lab-surface-card-quiet: linear-gradient(165deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)), linear-gradient(180deg, #10131a 0%, #0c0f15 100%);
    --lab-surface-sheet: radial-gradient(120% 60% at 12% -8%, rgba(69, 112, 212, 0.06), transparent 55%), linear-gradient(180deg, #11151c 0%, #0c1016 100%);

    --lab-elevation-card: inset 1px 1px 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 rgba(255, 255, 255, 0.015), 0 14px 32px -20px rgba(0, 0, 0, 0.76), 0 2px 6px rgba(0, 0, 0, 0.3);
    --lab-elevation-card-quiet: inset 1px 1px 0 rgba(255, 255, 255, 0.04), 0 8px 16px -12px rgba(0, 0, 0, 0.52);
    --lab-elevation-sheet: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 -16px 48px -26px rgba(0, 0, 0, 0.8), 0 -2px 0 rgba(0, 0, 0, 0.32);

    --lab-focus-ring: 0 0 0 2px rgba(98, 201, 52, 0.48);
    --lab-danger: #f0382e;
    --lab-success: #62c934;

    --lab-icon-btn-bg: rgba(255, 255, 255, 0.04);
    --lab-icon-btn-border: rgba(255, 255, 255, 0.14);
    --lab-field-bg: rgba(255, 255, 255, 0.045);
    --lab-field-border: rgba(255, 255, 255, 0.09);
    --lab-scrim: rgba(0, 0, 0, 0.6);

    --lab-motion-fast: 130ms;
    --lab-motion-sheet: 260ms;
}

/* -------------------------------------------------------------------------- */
/* Admin surface — Violet Glass (indigo CTA; not DEMS neon green)             */
/* -------------------------------------------------------------------------- */

[data-lab-surface="admin"],
[data-lab-surface="admin"][data-lab-theme="classic"] {
    --lab-bg-0: #0a0a12;
    --lab-bg-1: #141414;
    --lab-bg-2: #1a1a1a;
    --lab-bg: var(--lab-bg-1);

    --lab-fg: #fafafa;
    --lab-fg-muted: #a3a3a3;
    --lab-fg-subtle: #737373;
    --lab-fg-faint: rgba(255, 255, 255, 0.34);

    --lab-accent: #6366f1;
    --lab-accent-strong: #818cf8;
    --lab-accent-deep: #4f46e5;
    --lab-accent-soft: rgba(99, 102, 241, 0.15);
    --lab-accent-glow: rgba(79, 70, 229, 0.35);
    --lab-accent-ink: #0b0a18;

    --lab-atmos-blue: #3b82f6;
    --lab-atmos-indigo: #6366f1;
    --lab-atmos-purple: #8b5cf6;

    --lab-glass: rgba(255, 255, 255, 0.05);
    --lab-glass-strong: rgba(18, 18, 24, 0.88);
    --lab-border: rgba(255, 255, 255, 0.08);
    --lab-border-strong: rgba(255, 255, 255, 0.18);
    --lab-hairline: rgba(255, 255, 255, 0.06);

    --lab-cta-from: #6366f1;
    --lab-cta-via: #5558ee;
    --lab-cta-to: #4f46e5;
    --lab-cta-border: rgba(255, 255, 255, 0.18);
    --lab-cta-ink: #f5f3ff;

    --lab-surface-card: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), linear-gradient(180deg, #16161e 0%, #121218 100%);
    --lab-surface-card-quiet: rgba(18, 18, 24, 0.88);
    --lab-surface-sheet: linear-gradient(180deg, #16161e 0%, #121218 100%);

    --lab-elevation-card: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --lab-elevation-sheet: 0 -20px 60px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --lab-focus-ring: 0 0 0 2px rgba(99, 102, 241, 0.45);
    --lab-scrim: rgba(0, 0, 0, 0.7);
    --lab-success: #34d399;
    --lab-danger: #f87171;

    --lab-icon-btn-bg: rgba(255, 255, 255, 0.06);
    --lab-icon-btn-border: rgba(255, 255, 255, 0.12);
    --lab-icon-btn-fg: #fafafa;

    --lab-field-bg: rgba(255, 255, 255, 0.04);
    --lab-field-border: rgba(255, 255, 255, 0.1);
    --lab-field-fg: #fafafa;
    --lab-field-placeholder: rgba(250, 250, 250, 0.4);

    --lab-admin-sidebar-rail-w: 68px;
    --lab-admin-sidebar-expand-w: 240px;
    --lab-admin-info: #3b82f6;
}

/* -------------------------------------------------------------------------- */
/* Booking surface — classic green / premium purple (replaces theme-gold)     */
/* -------------------------------------------------------------------------- */

[data-lab-surface="booking"],
[data-lab-surface="booking"][data-lab-theme="classic"] {
    --lab-bg-0: #050505;
    --lab-bg-1: #0a0a0a;
    --lab-bg-2: #121212;
    --lab-bg: var(--lab-bg-1);

    --lab-fg: #ffffff;
    --lab-fg-muted: rgba(255, 255, 255, 0.72);
    --lab-fg-subtle: rgba(255, 255, 255, 0.48);

    --lab-accent: #77f601;
    --lab-accent-strong: #9aff3d;
    --lab-accent-deep: #4bb800;
    --lab-accent-soft: rgba(119, 246, 1, 0.14);
    --lab-accent-glow: rgba(119, 246, 1, 0.35);
    --lab-accent-ink: #07170a;

    --lab-cta-from: #9aff3d;
    --lab-cta-via: #77f601;
    --lab-cta-to: #4bb800;
    --lab-cta-border: rgba(185, 226, 140, 0.4);
    --lab-cta-ink: #07170a;

    --lab-glass: rgba(255, 255, 255, 0.06);
    --lab-border: rgba(255, 255, 255, 0.12);
    --lab-border-strong: rgba(255, 255, 255, 0.2);
    --lab-scrim: rgba(0, 0, 0, 0.65);
}

[data-lab-surface="booking"][data-lab-theme="premium"] {
    --lab-bg-0: #0a0614;
    --lab-bg-1: #0f0a1a;
    --lab-bg-2: #161022;

    --lab-accent: #a78bfa;
    --lab-accent-strong: #c4b5fd;
    --lab-accent-deep: #7c3aed;
    --lab-accent-soft: rgba(167, 139, 250, 0.16);
    --lab-accent-glow: rgba(124, 58, 237, 0.35);
    --lab-accent-ink: #140a24;

    --lab-cta-from: #c4b5fd;
    --lab-cta-via: #a78bfa;
    --lab-cta-to: #7c3aed;
    --lab-cta-border: rgba(167, 139, 250, 0.45);
    --lab-cta-ink: #140a24;

    --lab-atmos-purple: #a78bfa;
}