:root {

    /* Colors */

    --color-black: #000000;
    --color-white: #ffffff;

    --color-cream: #f3f0e9;
    --color-light: #e9e6df;
    --color-blush: #fdf1e6;
    --color-red: #fb4033;
    --color-light-yellow: #fff6da;

    --color-gray: #666666;
    --color-border: #d8d5ce;

    --color-accent-red: #e2402f;
    --color-accent-yellow: #f2c14e;
    --color-bg-yellow: #ffefc2;

    --color-dark-bg: #0f0b08;
    --color-dark-panel: #1e150e;
    --color-dark-line: rgba(255, 255, 255, 0.1);


    /* Typography */

    --font-primary:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif;


    /* Container */

    --container-width: 1400px;

    --container-padding: 32px;


    /* Spacing */

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 100px;
    --space-3xl: 160px;


    /* Border Radius */

    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-pill: 999px;


    /* Hero Showcase Slider — number of boxes visible at once.
       See the big comment above ".showcase-card" in style.css for
       the full "how to change this later" guide. Short version:
       edit --showcase-visible below, everything else recalculates
       itself automatically. */

    --showcase-visible: 5;
    --showcase-gap: 24px;


    /* Transition */

    --transition:
        0.3s ease;

}