/* =========================
   Fluent in Turkish · Design Tokens
   ========================= */
:root {
    /* Fonts */
    --font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Type scale */
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-24: 24px;
    --fs-32: 32px;
    --fs-40: clamp(32px, 2.6vw, 40px);

    --lh-tight: 1.2;
    --lh-snug: 1.3;
    --lh-normal: 1.6;
    --lh-loose: 1.7;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Colors */
    --bg: #ffffff;
    --surface: #ffffff;
    --ink: #323232;
    --gray-ink: #848585;
    --gray-ink-lead: #848585;
    --gray-ink-soft: #9ca3af;
    --muted: #4a5568;
    --ring: rgba(217, 217, 219, .64);
    --brand: #FCD34F;
    --brand-ink: #141414;
    --background-gray: #F8F9F9;
    --background-blueish: #f8fafc;

    /* Level accents */
    --level-beginner: #319d5e;
    --level-intermediate: #006574;
    --level-advanced: #dc2626;

    /* Semantics */
    --ok: var(--level-beginner);
    --warning: #b45309;
    --link: #6b5800;

    /* Badge colors */
    --most-popular-bg: #D6E6E9;
    --most-popular: #006574;
    --best-price-bg: #F2CECF;
    --best-price: #850005;

    /* Soft fills */
    --brand-soft: color-mix(in srgb, var(--brand) 14%, #fff);
    --beginner-soft: color-mix(in srgb, var(--level-beginner) 16%, #fff);
    --intermediate-soft: color-mix(in srgb, var(--level-intermediate) 16%, #fff);

    /* Spacing scale */
    --space-8: 8px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-18: 18px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-128: 128px;
    --section-gap: clamp(24px, 6vw, 80px);

    /* Radii */
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-pill: 100px;

    /* Shadows */
    --shadow-1: 0 2px 8px rgba(0, 0, 0, .08);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, .08);
    --shadow-3: 5px 5px 25px 0 rgba(137, 141, 154, .3019607843);

    /* Grid */
    --container-max: 78rem;
    --gutter-x: 1.5rem;
    --gutter-y: 1.25rem;
}

@media (max-width: 900px) {
    :root { --gutter-x: 1.25rem; }
}

@media (max-width: 600px) {
    :root { --gutter-x: 1rem; }
}