/* =========================
   DESIGN TOKENS
========================= */

:root {
    /* Layout */
    --container-width: 1440px;
    --page-inline-space: 64px;
    --section-space: 14px;
    --gap-bento: 14px;

    /* Spacing scale */
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Reusable card sizing */
    --card-padding: clamp(22px, 2vw, 32px);
    --card-padding-compact: clamp(18px, 1.6vw, 24px);

    /* Typography */
    --font-main: "Onest", Arial, sans-serif;
    --font-accent: "IBM Plex Mono", monospace;

    /* Base palette */
    --color-bg: #f5f5f2;
    --color-surface: #ffffff;

    --color-text: #0b0b0b;
    --color-text-muted: #60605f;
    --color-text-soft: #92928f;

    --color-text-inverse: #ffffff;
    --color-text-inverse-muted: #bdbdb9;

    --color-dark: #080808;
    --color-dark-soft: #1c1928;

    --color-accent: #6948d8;
    --color-accent-hover: #5938c8;
    --color-accent-soft: #a988e8;
    --color-accent-pale: #eee8ff;

    --color-yellow: #ffd64a;
    --color-yellow-hover: #f2c52e;
    --color-success: #83e457;

    --color-border: #d8d8d4;
    --color-border-dark: #333333;

    /* Gradients / effects */
    --gradient-dark:
        linear-gradient(145deg, var(--color-dark) 0%, var(--color-dark-soft) 100%);

    --gradient-accent-soft:
        linear-gradient(145deg, var(--color-accent-pale) 0%, #d8c9fa 100%);

    --shadow-card: 0 8px 30px rgb(0 0 0 / 6%);
    --shadow-card-hover: 0 14px 40px rgb(0 0 0 / 10%);

    /* Shape */
    --radius-card: 22px;
    --radius-large: 30px;
    --radius-pill: 999px;
}

@media (max-width: 1024px) {
    :root {
        --page-inline-space: 48px;
    }
}

@media (max-width: 767px) {
    :root {
        --page-inline-space: 32px;
    }
}

@media (max-width: 620px) {
    :root {
        --gap-bento: 10px;
        --radius-card: 18px;
        --radius-large: 22px;
    }
}