/* Basic typographical styles */

/**
 * All font sizes are based on 16px base font size and 1920px wide screen
 * Default size is expressed as percentage of screen width.
 * text-14px: 12px-27px, default: 14px
 * text-16px: 14px-28px, default: 16px
 * text-18px: 14px-30px, default: 18px
 * text-20px: 16px-32px, default: 20px
 * text-22px: 17px-33px, default: 22px
 * text-25px: 18px-35px, default: 25px
 * text-30px: 19px-37px, default: 30px
 * text-35px: 20px-40px, default: 35px
 * text-38px: 22px-48px, default: 38px
 * text-40px: 24px-56px, default: 40px
 * text-45px: 25px-64px, default: 45px
 * text-50px: 27px-72px, default: 50px
 * text-55px: 28px-76px, default: 55px
 * text-60px: 30px-80px, default: 60px
 * text-70px: 30px-76px, default: 70px
 * text-75px: 32px-80px, default: 75px
 *
 * Font sizes at standard viewport widths:
 *           | 360px | 640px | 768px | 1024px | 1280px | 1440px | 1920px
 *           |-------|-------|-------|--------|--------|--------|-------
 * text-14px | 12.00 | 12.36 | 12.52 | 12.85  | 13.18  | 13.38  | 14.00
 * text-16px | 14.00 | 14.36 | 14.52 | 14.85  | 15.18  | 15.38  | 16.00
 * text-18px | 14.00 | 14.72 | 15.05 | 15.70  | 16.36  | 16.77  | 18.00
 * text-20px | 16.00 | 16.72 | 17.05 | 17.70  | 18.36  | 18.77  | 20.00
 * text-22px | 17.60 | 18.36 | 18.75 | 19.47  | 20.19  | 20.65  | 22.00
 * text-25px | 18.00 | 19.26 | 19.83 | 20.98  | 22.13  | 22.85  | 25.00
 * text-30px | 18.96 | 20.89 | 21.85 | 23.66  | 25.47  | 26.60  | 30.00
 * text-35px | 20.00 | 22.69 | 23.92 | 26.38  | 28.85  | 30.38  | 35.00
 * text-38px | 22.40 | 24.85 | 26.48 | 29.04  | 31.60  | 33.20  | 38.00
 * text-40px | 24.00 | 26.87 | 28.18 | 30.81  | 33.44  | 35.08  | 40.00
 * text-45px | 25.60 | 29.22 | 30.67 | 33.86  | 37.04  | 39.03  | 45.00
 * text-50px | 27.20 | 31.58 | 33.16 | 36.90  | 40.65  | 42.98  | 50.00
 * text-70px | 30.40 | 37.01 | 40.76 | 47.26  | 53.75  | 57.82  | 70.00
 * text-75px | 32.00 | 39.46 | 43.25 | 50.30  | 57.36  | 61.77  | 75.00
*/

@theme static {
    --font-sans:   "Raleway", sans-serif;
    --font-headings: var(--font-sans);
    --line-height: 1.6;

    --text-base: 1rem;
    --text-14px: clamp(0.75rem,  calc(0.7212rem + 0.1282vw), 0.875rem);
    --text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem);
    --text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem);
    --text-20px: clamp(1rem,     calc(0.9423rem + 0.2564vw), 1.25rem);
    --text-22px: clamp(1.1rem,   calc(1.0365rem + 0.2821vw), 1.375rem);
    --text-25px: clamp(1.125rem, calc(1.024rem  + 0.4487vw), 1.5625rem);
    --text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem);
    --text-35px: clamp(1.25rem,  calc(1.0337rem + 0.9615vw), 2.1875rem);
    --text-38px: clamp(1.4rem,   calc(1.175rem  + 1vw),      2.375rem);
    --text-40px: clamp(1.5rem,   calc(1.2692rem + 1.0256vw), 2.5rem);
    --text-45px: clamp(1.6rem,   calc(1.3202rem + 1.2436vw), 2.8125rem);
    --text-50px: clamp(1.7rem,   calc(1.3712rem + 1.4615vw), 3.125rem);
    --text-70px: clamp(1.9rem,   calc(1.3288rem + 2.5385vw), 4.375rem);
    --text-75px: clamp(2rem,     calc(1.3798rem + 2.7564vw), 4.6875rem);

    --h1: calc(var(--text-base) * 2.25);
    --h2: calc(var(--text-base) * 1.75);
    --h3: calc(var(--text-base) * 1.5);
    --h4: calc(var(--text-base) * 1.25);
    --h5: calc(var(--text-base) * 1.125);
    --h6: calc(var(--text-base) * 1.05);
}

body {
    background-color: #100e0b;
    color: var(--color-on-surface, #e3e1e9);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height);
}

::selection { background: var(--color-warning); }

@layer components {
    h1, h2, h3,
    h4, h5, h6 {
        font-family: var(--font-headings);
        font-weight: 700;
        margin: 0 0 1rem;
    }

    h1, .h1 {
        font-size: var(--h1);
        line-height: 1.2;
    }

    h2, .h2 {
        font-size: var(--h2);
        line-height: 1.3;
    }

    h3, .h3 {
        font-size: var(--h3);
        line-height: 1.4;
    }

    h4, .h4 {
        font-size: var(--h4);
        line-height: 1.5;
    }

    h5, .h5 { font-size: var(--h5); }

    h6, .h6 { font-size: var(--h6); }
}

a, .link {
    color: var(--color-bodylinks);
    text-decoration: none;
    transition: color 200ms;
    cursor: pointer;

    &:hover { color: var(--color-primary); }
}

/* Inline links inside flowing text need an underline so they remain
 * distinguishable from surrounding text without relying solely on color
 * (WCAG 2.4.4 / axe link-in-text-block). */
p a, li a, dd a, td a, blockquote a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

h1 a, .h1 a,
h2 a, .h2 a,
h3 a, .h3 a {
    color: inherit;
    text-decoration: underline;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ul, ol {  margin: 0 0 1rem 1.5rem; padding: 0; }

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li ul, li ol { margin: 0 1rem; }

ol ol { list-style: lower-alpha; }

ol ol ol { list-style: lower-roman; }

ol ol ol ol { list-style: lower-alpha; }

pre, code,
samp, style { font-family: monospace; }

pre {
    font-size: 0.875rem;
    overflow: auto;
    padding: 1.5rem;
}

pre code {
    background-color: inherit;
    border-radius: 0;
    color: inherit;
    padding: 0;
}

code { @apply bg-white/30 px-0.25 py-0.25 font-mono text-black rounded-sm; }

hr {
    background-color: black;
    border: none;
    display: block;
    height: 1px;
    margin: 1rem 0;
    width: 100%;
}
