/* =============================================================================
   Global — Design Tokens + Reset + Base Element Styles
   CUBE CSS: This file forms the foundation layer.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Design Tokens
   ----------------------------------------------------------------------------- */
:root {
    /* Colors */
    --color-base: #e4e4d5;
    --color-text: #000000;
    --color-text-inverse: #ffffff;
    --color-accent: #010191;
    --color-blog: #801206;
    --color-antique: antiquewhite;

    /* Fonts */
    --font-sans: 'Josefin Sans', sans-serif;
    --font-serif: 'Josefin Slab', serif;

    /* Font sizes — fluid via clamp(min, preferred, max)
       Scale range: 375px → 1440px
       Formula: clamp(min, calc(intercept + slope * vw), max) */
    --text-sm:   clamp(0.75rem,  calc(0.706rem + 0.188vw), 0.875rem); /* 12px → 14px */
    --text-base: clamp(0.875rem, calc(0.831rem + 0.188vw), 1rem);     /* 14px → 16px */
    --text-md:   clamp(1rem,     calc(0.894rem + 0.451vw), 1.3rem);   /* 16px → 20.8px */
    --text-body: clamp(1.1rem,   calc(0.968rem + 0.563vw), 1.475rem); /* 17.6px → 23.6px — blog body */
    --text-lg:   clamp(1.125rem, calc(0.993rem + 0.563vw), 1.5rem);   /* 18px → 24px */
    --text-xl:   clamp(1.375rem, calc(1.155rem + 0.939vw), 2rem);     /* 22px → 32px */
    --text-2xl:  clamp(1.75rem,  calc(1.31rem  + 1.878vw), 3rem);     /* 28px → 48px — h1 */
    --text-3xl:  clamp(1.75rem,  calc(0.958rem + 3.38vw),  4rem);     /* 28px → 64px — hero name */
    --text-hero: clamp(1.25rem,  calc(0.053rem + 5.108vw), 4.65rem);  /* 20px → 74.4px — opening statement */

    /* Spacing */
    --space-xs: 0.25rem;   /* 4px */
    --space-s: 0.5rem;     /* 8px */
    --space-m: 1rem;       /* 16px */
    --space-l: 2rem;       /* 32px */
    --space-xl: 3rem;      /* 48px */
    --space-2xl: 4rem;     /* 64px */

    /* Site gutter — viewport-relative horizontal padding */
    --gutter: 4vw;

    /* Border radius */
    --radius-sm: 3px;
    --radius-md: 10px;
    --radius-lg: 30px;

    /* Shadows */
    --shadow-card: 3px 3px 5px rgba(0, 0, 0, 0.2);
    --shadow-page: 0px 1px 6px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 0.1s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* -----------------------------------------------------------------------------
   Reset
   ----------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   Base Element Styles
   ----------------------------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
nav {
    font-family: var(--font-sans);
}

h1 {
    font-size: var(--text-2xl);
}

h2 {
    font-size: var(--text-xl);
}

p {
    font-family: var(--font-serif);
}

a {
    text-decoration: none;
}

main {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    z-index: 10;
}

img {
    display: block;
}

/* -----------------------------------------------------------------------------
   Page-level background colors
   ----------------------------------------------------------------------------- */
.page-home,
.page-contact {
    background-color: var(--color-base);
}

.page-blog {
    background-color: var(--color-blog);
}