:root {
    /* ========================================
       Colors
    ======================================== */

    /* Primary */
    --color-primary-50:  #f2f6fc;
    --color-primary-100: #e1ebf8;
    --color-primary-200: #cadcf3;
    --color-primary-300: #a5c7eb;
    --color-primary-400: #7aa9e0;
    --color-primary-500: #5b8bd6;
    --color-primary-600: #4771c9;
    --color-primary-700: #3d5eb8;
    --color-primary-800: #374e96;
    --color-primary-900: #304478;
    --color-primary-950: #232d4d;

    /* Secondary */
    --color-secondary-50:  #eff7ff;
    --color-secondary-100: #daebff;
    --color-secondary-200: #bedeff;
    --color-secondary-300: #a3d2ff;
    --color-secondary-400: #5dabfd;
    --color-secondary-500: #3789fa;
    --color-secondary-600: #216aef;
    --color-secondary-700: #1954dc;
    --color-secondary-800: #1b45b2;
    --color-secondary-900: #1c3d8c;
    --color-secondary-950: #162655;

    /* Accent */
    --color-accent-50:  #edf3ff;
    --color-accent-100: #dfe8ff;
    --color-accent-200: #c5d5ff;
    --color-accent-300: #a3b9ff;
    --color-accent-400: #7d91fc;
    --color-accent-500: #5e6bf6;
    --color-accent-600: #4143ea;
    --color-accent-700: #3533cf;
    --color-accent-800: #2c2ca7;
    --color-accent-900: #2b2e84;
    --color-accent-950: #1a194d;

    /* Neutral */
    --color-neutral-50:  #fafafa;
    --color-neutral-100: #f4f4f5;
    --color-neutral-200: #e9eaec;
    --color-neutral-300: #dcdde0;
    --color-neutral-400: #d1d2d6;
    --color-neutral-500: #c6c7cc;
    --color-neutral-600: #9b9da6;
    --color-neutral-700: #71737f;
    --color-neutral-800: #4d4f56;
    --color-neutral-900: #27272b;
    --color-neutral-950: #131416;

    /* Warning */
    --color-warning:       #c94747;
    --color-warning-light: #fcf5f5;

    /* Gradients */
    --gradient-accent: linear-gradient(160deg, #374e96 30%, #7d91fc);
    --gradient-grey:   linear-gradient(160deg, #fafafa 30%, #edf3ff);

    /* RGB values */
    --rgb-primary-950:  35, 45, 77;
    --rgb-primary-1000: 21, 28, 50;

    /* ========================================
       Typography
    ======================================== */

    --font-size-h1:     2.4rem;
    --font-size-h2:     2.4rem;
    --font-size-h4:     2.2rem;
    --font-size-button: 1.6rem;
    --font-8px:         0.8rem;
    --font-family:      "Helvetica Neue", "Helvetica", "Noto Sans JP", "Arial", sans-serif;
    --font-weight-bold: 600;
    --letter-spacing-hx: 0.04em;

    /* ========================================
       Spacing
    ======================================== */

    --spacing-xxsmall: clamp(5px, 1.3vw, 6px);
    --spacing-xsmall:  clamp(8px, 2.1vw, 10px);
    --spacing-small:   clamp(13px, 3.4vw, 16px);
    --spacing-medium:  clamp(22px, 5.6vw, 26px);
    --spacing-large:   clamp(35px, 9vw, 43px);
    --spacing-xlarge:  clamp(57px, 14.6vw, 69px);
    --spacing-xxlarge: clamp(92px, 23.6vw, 112px);

    /* ========================================
       Components
    ======================================== */

    --button-width:  293px;
    --button-height: clamp(57px, 14.6vw, 59px);

    /* ========================================
       Animation
    ======================================== */

    --cubic-bezier-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ============================================
   Tablet (600px+)
============================================ */
@media screen and (min-width: 600px) {
    :root {
        /* Typography */
        --font-size-h1:     2.6rem;
        --font-size-h2:     3.2rem;
        --font-size-h4:     2.5rem;
        --font-size-button: 1.7rem;

        /* Spacing */
        --spacing-xxsmall: clamp(6px, 0.8vw, 8px);
        --spacing-xsmall:  clamp(10px, 1.3vw, 13px);
        --spacing-small:   clamp(16px, 2.1vw, 20px);
        --spacing-medium:  clamp(26px, 3.4vw, 33px);
        --spacing-large:   clamp(43px, 5.6vw, 53px);
        --spacing-xlarge:  clamp(69px, 9vw, 87px);
        --spacing-xxlarge: clamp(112px, 14.6vw, 140px);

        /* Components */
        --button-width:  clamp(293px, 38.2vw, 314px);
        --button-height: clamp(59px, 7.7vw, 61px);
    }
}

/* ============================================
   Desktop (835px+)
============================================ */
@media screen and (min-width: 835px) {
    :root {
        /* Typography */
        --font-size-h1:     2.8rem;
        --font-size-h2:     3.8rem;
        --font-size-button: 1.7rem;
    }
}