:root {
    --accent-build: #00e0ff;
    --accent-fix: #ff3e7f;
    --accent-extend: #ff8c00;

    --surface-section-dark: rgba(12, 16, 42, 0.92);
    --surface-section: rgba(21, 25, 55, 0.76);
    --surface-card: rgba(30, 32, 44, 0.5);
    --surface-card-alt: rgba(10, 14, 39, 0.95);

    --border-section-strong: rgba(255, 255, 255, 0.06);
    --border-section-soft: rgba(255, 255, 255, 0.05);
    --border-card: rgba(255, 255, 255, 0.07);
    --border-card-strong: rgba(255, 255, 255, 0.28);

    --card-padding: 1.75rem;
    --card-border-width: 4px;
    --card-shadow: var(--shadow-ghost);

    --shape-card-bevel-sm: 12px;
    --shape-card-bevel-md: 14px;
    --shape-card-bevel-lg: 16px;

    --text-card-primary: rgba(255, 255, 255, 0.85);
    --text-card-muted: rgba(255, 255, 255, 0.6);

    --layout-container-inline: calc(100% - 2 * var(--space-sm));
    --layout-container-width: var(--max-width);
    --layout-page-gap: clamp(var(--space-lg), 5vw, var(--space-xl));
    --layout-section-padding-block: clamp(var(--space-lg), 6vw, calc(var(--space-xl) + var(--space-xs)));
    --layout-section-stripe-width: 120px;
    --layout-section-stripe-height: 6px;
    --layout-section-stripe-gradient: linear-gradient(90deg, transparent, rgba(255, 46, 99, 0.25), transparent);

    --stack-gap-sm: var(--space-sm);
    --stack-gap-md: var(--space-md);
    --stack-gap-lg: var(--space-lg);

    --media-frame-surface: rgba(12, 16, 42, 0.8);
    --media-frame-border: var(--border-card-strong);
    --media-frame-shadow: 0 28px 55px rgba(0, 0, 0, 0.45);
}