:root {

    /* ============================
        Colors
    ===============================*/

    /* Primary - dark color*/
    --color-primary: #1A1A2E;

    /* Accent */
    --color-accent: #E9E0C9;

    /* Accent hover — slightly lighter for interactions */
    --color-accent-hover: #90a4c2;

    /* Surface colors — what sections sit on */
    --color-surface-dark: #12121F;
    --color-surface-mid: #1F1F35;
    --color-surface-light: #F4F7FB;
    --color-surface-white: #FFFFFF;

     /* Text colors — context-driven, not one fixed color */
    --color-text-on-dark: #F4F7FB;
    --color-text-on-dark-muted: rgba(244, 247, 251, 0.72);
    --color-text-on-light: #1A1A2E;
    --color-text-on-light-muted: #5A6478;

    /* Border */
    --color-border-dark: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(26, 26, 46, 0.1);

    /* ============================================
        TYPOGRAPHY
    ============================================ */

    /* Fonts */
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Scale */
    --text-xs:   0.75rem;    /* 12px — labels, captions */
    --text-sm:   0.875rem;   /* 14px — small body */
    --text-base: 1rem;       /* 16px — body */
    --text-lg:   1.125rem;   /* 18px — large body */
    --text-xl:   1.25rem;    /* 20px — small heading */
    --text-2xl:  1.5rem;     /* 24px — H3 */
    --text-3xl:  1.875rem;   /* 30px — H2 */
    --text-4xl:  2.25rem;    /* 36px — H1 small */
    --text-5xl:  3rem;       /* 48px — H1 */
    --text-6xl:  3.75rem;    /* 60px — Hero heading */
    --text-7xl:  4.5rem;     /* 72px — Hero large */

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

    /* Line height */
    --leading-tight:  1.1;
    --leading-snug:   1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0em;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;

    /* ============================================
        SPACING — 8px base unit
    ============================================ */

    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */

    /* ============================================
        LAYOUT
    ============================================ */

    --max-width: 1200px;
    --nav-height: 80px;

    /* Section padding */
    --section-padding-y: var(--space-24);
    --section-padding-x: var(--space-20);

    /* ============================================
        BORDERS & RADIUS
    ============================================ */

    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ============================================
        SHADOWS
    ============================================ */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-accent: 0 4px 24px rgba(74, 111, 165, 0.3);

    /* ============================================
        TRANSITIONS
    ============================================ */

    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
}