/* Ladi Luck Foundation base stylesheet.
   Type scale and spacing only. No page layouts.
   References token names, never raw values. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--text-on-cream);
    font-family: var(--font-body);
    font-weight: var(--weight-body);
    font-size: var(--size-body);
    line-height: var(--leading-body);
}

/* ---------- Spacing frame ---------- */

.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding-inline: var(--space-3);
    padding-block: var(--section-pad);
}

.section + .section {
    margin-top: var(--section-pad);
}

/* ---------- Display type ----------
   The register decides the face. One face per block, so Bebas Neue and
   Kalam never meet inside the same text block. */

.hero,
h1,
h2 {
    font-family: var(--display-font);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    line-height: var(--leading-display);
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
}

.hero {
    font-size: var(--size-hero);
}

h1 {
    font-size: var(--size-h1);
}

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

/* h3 is 22px, below the 28px drive face floor, so it always takes the
   heading face even inside the drive register. Oswald rather than the display
   face, because Bebas Neue has one weight and no lowercase, which leaves a
   subhead nothing to distinguish itself with. This is the floor rule expressed
   structurally rather than left to whoever writes the markup. */
h3 {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    font-size: var(--size-h3);
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-display);
    text-transform: uppercase;
    margin: 0 0 var(--space-2);
}

/* Lighter display weight for secondary headings that should not shout. */
.display-soft {
    font-weight: var(--weight-display-soft);
}

/* ---------- Body copy ---------- */

p {
    max-width: var(--measure);
    margin: 0 0 var(--space-2);
}

.lede {
    font-size: var(--size-h3);
    line-height: var(--leading-body);
}

/* ---------- Small label ---------- */

.label {
    font-family: var(--font-heading);
    font-weight: var(--weight-label);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-body);
}

/* ---------- Pink slab ----------
   A fill that carries display type. It hangs past the left edge of the text
   column by its own horizontal padding, so the type inside lines up with the
   column and the fill reads as stuck on rather than boxed around the text. */

.slab {
    display: table;
    background: var(--pink);
    color: var(--text-on-pink);
    padding: var(--slab-pad-y) var(--slab-pad-x);
    margin-left: calc(-1 * var(--slab-overhang));
    margin-bottom: var(--space-3);
}

/* On an inline run, clone the padding onto every wrapped line so a
   multi-line heading reads as marker strokes rather than one block. */
.slab-inline {
    display: inline;
    background: var(--pink);
    color: var(--text-on-pink);
    padding: var(--slab-pad-y) var(--slab-pad-x);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ---------- Surfaces ---------- */

.surface-purple {
    background: var(--purple);
    color: var(--text-on-purple);
}

.surface-cream {
    background: var(--cream);
    color: var(--text-on-cream);
}