:root {
    --bg: #f4f8fc;
    --surface: rgba(255, 255, 255, 0.84);
    --line: rgba(13, 26, 43, 0.1);
    --text: #0d1a2b;
    --muted: #5e7085;
    --primary: #07b8ff;
    --primary-strong: #0977c9;
    --secondary: #00c789;
    --secondary-strong: #0d9d73;
    --accent: #ff8a1f;
    --success: #22d27f;
    --shadow-lg: 0 30px 80px rgba(13, 26, 43, 0.12);
    --shadow-md: 0 20px 44px rgba(13, 26, 43, 0.1);
}

body {
    background:
        radial-gradient(circle at top left, rgba(7, 184, 255, 0.18), transparent 30%),
        radial-gradient(circle at 85% 12%, rgba(0, 199, 137, 0.14), transparent 22%),
        linear-gradient(180deg, #f8fbff 0%, #eef5fb 55%, #f6fbff 100%);
}

body::before {
    background-image:
        linear-gradient(rgba(13, 26, 43, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 26, 43, 0.035) 1px, transparent 1px);
}

body::after {
    background: radial-gradient(circle, rgba(255, 138, 31, 0.16), transparent 70%);
}

.surface-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 250, 255, 0.92));
}

.button.primary {
    box-shadow: 0 18px 30px rgba(7, 119, 201, 0.22);
}

.screen-panel::before {
    background: radial-gradient(circle, rgba(7, 184, 255, 0.22), transparent 70%);
}

.screen-panel::after {
    background: radial-gradient(circle, rgba(0, 199, 137, 0.22), transparent 70%);
}

.carousel-note::before {
    box-shadow: 0 0 0 6px rgba(7, 184, 255, 0.14);
}

.slide-chip,
.feature-card span {
    background: rgba(7, 184, 255, 0.12);
    color: var(--primary-strong);
}

.slide-chip {
    background: linear-gradient(135deg, var(--primary-strong), var(--primary));
    color: #ffffff;
}

.carousel-detail-modal-eyebrow::before {
    box-shadow: 0 0 0 6px rgba(7, 184, 255, 0.12);
}

.workflow-index {
    box-shadow: 0 14px 26px rgba(7, 119, 201, 0.22);
}