/* ===================================
   PART 6 - DESIGN SYSTEM
=================================== */

:root {

    /* Colors */
    --color-primary: #ff0000;
    --color-primary-dark: #cc0000;
    --color-secondary: #009432;

    --color-text: #333;
    --color-background: #ffffff;
    --color-surface: #f5f5f5;
    --color-border: #dddddd;

    /* Typography */
    --font-primary:
        "Poppins",
        sans-serif;

    --font-secondary:
        "Didact Gothic",
        sans-serif;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm:
        0 2px 8px rgba(0,0,0,.08);

    --shadow-md:
        0 5px 20px rgba(0,0,0,.12);

    --shadow-lg:
        0 10px 30px rgba(0,0,0,.18);

    /* Spacing */
    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;
}