:root {
    color-scheme: light;

    /* Brand */
    --color-brand-50: #edf6ff;
    --color-brand-100: #d6eaff;
    --color-brand-200: #bddcff;
    --color-brand-300: #89beff;
    --color-brand-500: #1366d6;
    --color-brand-600: #0e52ae;
    --color-brand-700: #0b3c81;

    --color-accent-100: #ffead1;
    --color-accent-500: #f28a18;
    --color-accent-600: #dd6c04;

    /* Ink / Neutral */
    --color-ink-950: #0f172a;
    --color-ink-900: #172033;
    --color-ink-800: #27344d;
    --color-ink-700: #334155;
    --color-ink-600: #475569;
    --color-ink-500: #5b677a;
    --color-ink-400: #738099;
    --color-ink-300: #c7d0dd;
    --color-ink-200: #dfe6ef;
    --color-ink-100: #eff4f9;
    --color-white: #ffffff;

    /* States */
    --color-success: #0f9f6e;
    --color-warning: #eab308;
    --color-danger: #dc2626;

    /* Surface */
    --bg-page: #f4f7fb;
    --bg-shell:
        radial-gradient(circle at top left, rgba(19, 102, 214, 0.12), transparent 28%),
        linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
    --bg-surface: #ffffff;
    --bg-elevated: rgba(255, 255, 255, 0.9);
    --bg-muted: #f8fbff;
    --bg-dark: #09111f;

    /* Text */
    --text-strong: var(--color-ink-950);
    --text-body: var(--color-ink-700);
    --text-soft: var(--color-ink-500);
    --text-muted: var(--color-ink-400);
    --text-inverse: var(--color-white);

    /* Border */
    --border-soft: rgba(130, 148, 173, 0.2);
    --border-default: #dfe6ef;
    --border-strong: rgba(76, 97, 131, 0.22);

    /* Typography */
    --font-display: "Noto Sans", sans-serif;
    --font-body: "Noto Sans", sans-serif;

    --font-size-2xs: 0.6875rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: clamp(1.85rem, 4vw, 2.6rem);
    --font-size-4xl: clamp(2.75rem, 6vw, 4.8rem);

    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-body: 1.7;
    --line-height-relaxed: 1.85;

    /* Spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Radius */
    --radius-xs: 0.5rem;
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-xs: 0 2px 10px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 18px 50px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 28px 80px rgba(10, 18, 36, 0.18);

    /* Layout */
    --container-max: 1200px;
    --container-max-wide: 1280px;
    --container-gutter: 1.5rem;
    --section-space: clamp(3rem, 5vw, 5rem);
    --header-height: 84px;

    /* Motion */
    --transition-base: 180ms ease;
    --transition-slow: 320ms ease;

    /* Z-index */
    --z-base: 1;
    --z-header: 40;
    --z-dropdown: 50;
    --z-drawer: 60;
    --z-modal: 80;
    --z-whatsapp: 70;
    --z-toast: 90;
}

@media (max-width: 760px) {
    :root {
        --container-gutter: 0.5rem;
        --header-height: 72px;
        --section-space: clamp(2rem, 7vw, 3.5rem);
    }
}