/* Variables */

:root {
    /* Colors — update these per project */
    --primary:    #0A2239;
    --background: #FFFFFE;
    --accent: #FF6200;

    --white: #FFFFFF;
    --black: #000000;

    /* Typography */
    --font-family-base: 'helvetica-neue-lt-pro', serif;
    --font-family-secondary: 'IBM Plex Mono', monospace;
    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-size-base: clamp(18px, 2.5vw, 24px);
    --line-height-base: 1.5;

    /* Font Sizing */
    --font-size-72: calc(var(--font-size-base) * 3);
    --font-size-60: calc(var(--font-size-base) * 2.5);
    --font-size-54: calc(var(--font-size-base) * 2.25);
    --font-size-48: calc(var(--font-size-base) * 2);
    --font-size-42: calc(var(--font-size-base) * 1.75);
    --font-size-36: calc(var(--font-size-base) * 1.5);
    --font-size-30: calc(var(--font-size-base) * 1.25);
    --font-size-24: calc(var(--font-size-base) * 1);
    --font-size-18: calc(var(--font-size-base) * 0.75);
    --font-size-16: calc(var(--font-size-base) * 0.6);
    --font-size-14: calc(var(--font-size-base) * 0.583);

    /* Spacing */
    --space-8:   clamp(0.5rem, 1vw, 0.75rem);
    --space-16:  clamp(0.75rem, 1.5vw, 1rem);
    --space-24:  clamp(1rem, 2vw, 1.5rem);
    --space-32:  clamp(1.5rem, 2.5vw, 2rem);
    --space-48:  clamp(2rem, 4vw, 3rem);
    --space-64:  clamp(2.5rem, 5vw, 4rem);
    --space-96:  clamp(4rem, 7.5vw, 6rem);
    --space-128: clamp(5rem, 10vw, 8rem);
    --space-256: clamp(10rem, 20vw, 16rem);
}