/* ======================================================
   🎨 DESIGN-SYSTEM – Colors, Spacing, Radii, Shadows
   ====================================================== */

:root {
    /* --------------------------------------------------
       COLORS
       -------------------------------------------------- */
    --mint-bg: #EDF7F5;            /* Global background */
    --mint-accent: #00AFAF;        /* Highlight / decorative line */
    --mint-dark: #008C8C;          /* Buttons & strong accents */

    --text-main: #0d2330;          /* Headings */
    --text-secondary: #333;        /* Body text */

    --white: #ffffff;
    --gray-border: #dfe7e5;

    /* --------------------------------------------------
       TYPOGRAPHY
       -------------------------------------------------- */
    --font-main: 'Source Sans 3', sans-serif;

    /* --------------------------------------------------
       SPACING SCALE
       (used globally for layout rhythm)
       -------------------------------------------------- */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-s: 12px;
    --space-m: 20px;
    --space-l: 32px;
    --space-xl: 50px;

    /* --------------------------------------------------
       COMPONENT SIZES
       -------------------------------------------------- */
    --card-padding: 22px;
    --card-radius: 12px;

    /* --------------------------------------------------
       SHADOWS
       -------------------------------------------------- */
    --shadow-soft: 0 3px 10px rgba(0,0,0,0.05);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.08);
}