@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

:root {
    color-scheme: light;
    --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: var(--font-sans);

    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.1);

    --bg: #f8fafc;
    --bg-muted: #eef2f7;
    --text: #0f172a;
    --text-muted: #475569;
    --border: rgba(15, 23, 42, 0.1);

    --primary: #2563eb;
    --primary-contrast: #ffffff;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #b00020;

    --surface: #ffffff;
    --surface2: #e5e7eb;
    --muted: var(--text-muted);

    --s1: var(--space-1);
    --s2: var(--space-2);
    --s3: var(--space-3);
    --s4: var(--space-4);
    --s5: 20px;
    --s6: var(--space-5);
    --s7: var(--space-6);
    --s8: 40px;
    --r1: var(--radius-sm);
    --r2: var(--radius-md);
    --r3: var(--radius-lg);
    --shadow1: 0 4px 14px rgba(17, 24, 39, 0.06);
    --shadow2: 0 14px 34px rgba(15, 23, 42, 0.12);
    --fs-sm: var(--text-sm);
    --fs-base: var(--text-md);
    --fs-lg: var(--text-lg);
    --fs-xl: var(--text-xl);
    --lh-base: 1.5;
}