:root[data-theme="light"] {
    --color-surface-999: #ffffff;
    --color-surface-990: #fdfdff;
    --color-surface-980: #ebf3fd;
    --color-surface-960: #ebf3fd;
    --color-surface-900: #fdfdff;
    --color-surface-400: #2563eb;
    --color-text-900: #e0e0e0;
    --color-text-400: #64748b;
    --color-text-300: #334155;
    --color-text-200: #0f172a;
}

:root[data-theme="dark"] {
    --color-surface-999: #1e293b;
    --color-surface-990: #0e2d75;
    --color-surface-980: #111827;
    --color-surface-960: #172554;
    --color-surface-900: #0f172a;
    --color-surface-400: #2563eb;
    --color-text-900: #49457e;
    --color-text-400: #94a3b8;
    --color-text-300: #e2e8f0;
    --color-text-200: #f8fafc;
}

:root {
    --font-family: 'Inter', sans-serif;
    --radius: 16px;
    --primary: var(--color-surface-400);
    --primary-dark: color-mix(in srgb, var(--primary) 82%, #000);
    --bg-color-1: var(--color-surface-990);
    --bg-color-2: var(--color-surface-980);
    --bg-color-3: var(--color-surface-999);
    --bg-color-th-1: 0%;
    --bg-color-th-2: 25%;
    --bg-color-th-3: 50%;
    --bg-light: var(--color-surface-900);
    --bg-color-header: color-mix(in srgb, var(--color-surface-999) 90%, transparent);
    --border-header: var(--color-text-900);
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --text-light: var(--color-text-400);
    --secondary: var(--color-text-200);
    --text-main: var(--color-text-300);

    /* ── Responsive scale ────────────────────────────────────────────────
       Sizes are fluid: clamp(MIN @ 360px viewport, linear, MAX @ 1200px viewport).
       Use these tokens instead of fixed font-size / padding values so text and
       spacing shrink on phones without a media query.

       Breakpoints (custom properties cannot be used inside @media, so these
       values are the convention — use only these, always max-width):
         sm  640px   phones            -> @media (max-width: 640px)
         md  900px   tablets, nav collapses, two-column layouts stack
         lg  1100px  small laptops
       Keep each @media block at the end of the file it adjusts. */

    /* Type */
    --fs-display: clamp(2rem, 1.36rem + 2.86vw, 3.5rem);    /* 32 -> 56px  hero h1 */
    --fs-h1:      clamp(1.75rem, 1.64rem + 0.48vw, 2rem);   /* 28 -> 32px  page h1 */
    --fs-h2:      clamp(1.75rem, 1.43rem + 1.43vw, 2.5rem); /* 28 -> 40px  section titles */
    --fs-h3:      clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem); /* 18 -> 20px card titles */
    --fs-price:   clamp(2.25rem, 1.93rem + 1.43vw, 3rem);   /* 36 -> 48px */
    --fs-lead:    clamp(1rem, 0.96rem + 0.19vw, 1.1rem);    /* 16 -> 17.6px intro text */
    --fs-body:    1rem;
    --fs-small:   0.875rem;

    /* Spacing */
    --gutter:           clamp(16px, 14.29px + 0.48vw, 20px);  /* container side padding */
    --space-section:    clamp(56px, 37.14px + 5.24vw, 100px); /* large section padding */
    --space-section-sm: clamp(48px, 34.29px + 3.81vw, 80px);  /* regular section padding */
    --space-card:       clamp(24px, 17.14px + 1.9vw, 40px);   /* card inner padding */
}