:root {
    --bg: #0f1115;
    --surface: #171a21;
    --surface-strong: #20242d;
    --border: #2c3340;
    --text: #f6f7f9;
    --muted: #a7afbd;
    --accent: #49d3c1;
    --accent-strong: #35b8a8;
    --danger-bg: #3d171c;
    --danger-text: #ffb8c0;
    --success-bg: #143323;
    --success-text: #baf3ce;
    --warning-bg: #373017;
    --warning-text: #f4dda2;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
    --button-text: #07110f;
    --input-bg: #0b0d11;
    --topbar-bg: rgba(15, 17, 21, 0.72);
    --mobile-nav-bg: rgba(15, 17, 21, 0.82);
    --soft-bg: rgba(255, 255, 255, 0.03);
    --accent-wash: rgba(73, 211, 193, 0.16);
    --glass-bg: rgba(23, 26, 33, 0.58);
    --glass-bg-strong: rgba(32, 36, 45, 0.68);
    --glass-bg-soft: rgba(255, 255, 255, 0.075);
    --glass-border: rgba(255, 255, 255, 0.16);
    --glass-highlight: rgba(255, 255, 255, 0.105);
    --glass-shadow:
        0 18px 46px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --glass-blur: 18px;
    --app-bg-pattern: url("../visual-assets/backgrounds/app-pattern-dark.webp");
    --app-bg-pattern-size: 560px 560px;
    --type-hero-title: clamp(1.9rem, 5vw, 2.55rem);
    --type-page-title: clamp(1.45rem, 2.4vw, 1.78rem);
    --type-detail-title: clamp(1.45rem, 3vw, 1.92rem);
    --type-section-title: 1.1rem;
    --type-card-title: 0.98rem;
}