/* ============================================================
   INVI STUDIO — Level 2: Semantic Design Tokens
   Product-level aliases. Components consume ONLY these tokens.
   ============================================================ */

:root {
    /* ── Page ── */
    --ww-invi-page-bg: var(--ww-base-gray-900);
    --ww-invi-page-text: var(--ww-base-white);
    --ww-invi-page-text-muted: var(--ww-base-gray-400);
    --ww-invi-page-text-dim: var(--ww-base-gray-500);
    --ww-invi-page-max-width: 1280px;
    --ww-invi-page-padding: var(--ww-base-space-24);

    /* ── Accent / Brand ── */
    --ww-invi-accent-cyan: var(--ww-base-cyan-500);
    --ww-invi-accent-purple: var(--ww-base-purple-500);
    --ww-invi-accent-gradient: var(--ww-base-gradient-accent);
    --ww-invi-accent-gradient-text: var(--ww-base-gradient-accent-full);

    /* ── Glass Surface ── */
    --ww-invi-glass-bg: var(--ww-base-glass-bg);
    --ww-invi-glass-border: var(--ww-base-glass-border);
    --ww-invi-glass-border-hover: var(--ww-base-glass-border-hover);
    --ww-invi-glass-blur: var(--ww-base-glass-blur);

    /* ── Header ── */
    --ww-invi-header-bg-scrolled: rgba(15, 15, 17, 0.8);

    /* ── Links ── */
    --ww-invi-link-color: var(--ww-base-gray-400);
    --ww-invi-link-hover: var(--ww-base-white);

    /* ── Button: Primary (cyan glass) ── */
    --ww-invi-btn-primary-bg: var(--ww-base-glow-cyan);
    --ww-invi-btn-primary-border: var(--ww-base-glow-cyan-strong);
    --ww-invi-btn-primary-shadow: 0 0 30px var(--ww-base-glow-cyan);

    /* ── Button: Secondary (outline) ── */
    --ww-invi-btn-secondary-border: var(--ww-base-glass-border-hover);
    --ww-invi-btn-secondary-text: rgba(255, 255, 255, 0.8);

    /* ── Card (glass) ── */
    --ww-invi-card-bg: var(--ww-base-glass-bg);
    --ww-invi-card-border: var(--ww-base-glass-border);
    --ww-invi-card-radius: var(--ww-base-radius-16);

    /* ── Card: hover glow ── */
    --ww-invi-card-hover-border: var(--ww-base-glow-purple-strong);
    --ww-invi-card-hover-shadow: 0 0 30px var(--ww-base-glow-purple);

    /* ── Section ── */
    --ww-invi-section-padding: var(--ww-base-space-96);

    /* ── Input / Form ── */
    --ww-invi-input-bg: rgba(26, 26, 30, 0.6);
    --ww-invi-input-border: var(--ww-base-glass-border);
    --ww-invi-input-border-focus: rgba(0, 217, 255, 0.4);
    --ww-invi-input-focus-shadow: 0 0 20px var(--ww-base-glow-cyan);

    /* ── Footer ── */
    --ww-invi-footer-border: rgba(255, 255, 255, 0.05);

    /* ── FAQ active ── */
    --ww-invi-faq-active-border: var(--ww-base-glow-cyan-strong);
    --ww-invi-faq-active-shadow: 0 0 40px rgba(0, 217, 255, 0.2);

    /* ── Tech badge ── */
    --ww-invi-badge-bg: rgba(255, 255, 255, 0.05);
    --ww-invi-badge-border-cyan: rgba(0, 217, 255, 0.2);
    --ww-invi-badge-border-purple: rgba(157, 78, 221, 0.2);
    --ww-invi-badge-shadow-cyan: 0 0 20px rgba(0, 217, 255, 0.1);

    /* ── Metric card ── */
    --ww-invi-metric-border-cyan: rgba(0, 217, 255, 0.2);
    --ww-invi-metric-shadow-cyan: 0 0 20px rgba(0, 217, 255, 0.1);
    --ww-invi-metric-border-purple: rgba(157, 78, 221, 0.2);
    --ww-invi-metric-shadow-purple: 0 0 20px rgba(157, 78, 221, 0.1);

    /* ── Code box ── */
    --ww-invi-code-bg: rgba(26, 26, 30, 0.8);
    --ww-invi-code-border: var(--ww-base-glow-purple-strong);
    --ww-invi-code-shadow: 0 0 30px var(--ww-base-glow-purple);

    /* ── Progress bar ── */
    --ww-invi-progress-track: var(--ww-base-gray-800);

    /* ── Like / Heart ── */
    --ww-invi-like-color: var(--ww-base-pink-500);
    --ww-invi-like-bg-active: rgba(255, 78, 132, 0.15);
    --ww-invi-like-border-active: rgba(255, 78, 132, 0.4);

    /* ── Star rating ── */
    --ww-invi-star-color: var(--ww-base-gold-500);

    /* ── Accent line gradients ── */
    --ww-invi-gradient-cyan-blue: linear-gradient(to right, var(--ww-base-cyan-500), var(--ww-base-blue-500));
    --ww-invi-gradient-purple: linear-gradient(to right, var(--ww-base-purple-500), var(--ww-base-purple-700));
    --ww-invi-gradient-green: linear-gradient(to right, var(--ww-base-green-400), var(--ww-base-green-500));
    --ww-invi-gradient-cyan-purple: var(--ww-invi-accent-gradient);
    --ww-invi-gradient-purple-green: linear-gradient(to right, var(--ww-base-purple-500), var(--ww-base-green-400));
    --ww-invi-gradient-green-cyan: linear-gradient(to right, var(--ww-base-green-400), var(--ww-base-cyan-500));

    /* ── Progress bar: slow ── */
    --ww-invi-progress-slow: linear-gradient(to right, var(--ww-base-gray-500), var(--ww-base-gray-600));
}