/**
 * Kind Recards — Typography
 * ----------------------------------------------------------------------------
 * Fira Sans is loaded from Google Fonts (see inc/enqueue.php). The two custom
 * display faces are self-hosted: drop the licensed files into /fonts and the
 * @font-face rules below pick them up. Until then, the fallbacks in the font
 * tokens keep the site legible.
 *
 *   Body / UI / menus ....... Fira Sans  (300 italic, 400, 600)
 *   Titles .................. Funky Smile
 *   Buttons ................. Drawing Doodle  (+20 tracking)
 */

/* ---- Custom display faces (self-hosted) -------------------------------- */
@font-face {
    font-family: "Funky Smile";
    src:
        url("../../fonts/FunkySmile-Regular.woff2") format("woff2"),
        url("../../fonts/FunkySmile-Regular.woff") format("woff"),
        url("../../fonts/FunkySmile-Regular.otf") format("opentype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Drawing Doodle";
    src:
        url("../../fonts/DrawingDoodle-Regular.woff2") format("woff2"),
        url("../../fonts/DrawingDoodle-Regular.woff") format("woff"),
        url("../../fonts/DrawingDoodle-Regular.otf") format("opentype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ---- Base type --------------------------------------------------------- */
html {
    font-size: 100%; /* respect the user's browser default (16px) */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--kr-font-body);
    font-weight: var(--kr-weight-regular);
    font-size: var(--kr-text-base);
    line-height: var(--kr-leading-normal);
    color: var(--kr-text-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Body copy in the brand is Fira Sans Light Italic. Apply it as an opt-in
   class so it doesn't fight with UI text, but it's the editorial default. */
.kr-body-text,
.entry-content p {
    font-weight: var(--kr-weight-light);
}

.kr-body-text--italic {
    font-style: italic;
}

/* ---- Headings: Funky Smile -------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.kr-heading {
    font-family: var(--kr-font-heading);
    font-weight: var(--kr-weight-regular);
    line-height: var(--kr-leading-tight);
    color: var(--kr-heading);
    margin: 0 0 var(--kr-space-4);
    text-wrap: balance;
}

h1,
.kr-h1 {
    font-size: var(--kr-text-3xl);
}
h2,
.kr-h2 {
    font-size: var(--kr-text-2xl);
}
h3,
.kr-h3 {
    font-size: var(--kr-text-xl);
}
h4,
.kr-h4 {
    font-size: var(--kr-text-lg);
}
h5,
.kr-h5 {
    font-size: var(--kr-text-md);
}
h6,
.kr-h6 {
    font-size: var(--kr-text-base);
    text-transform: uppercase;
    letter-spacing: var(--kr-tracking-wide);
}

/* Oversized display heading (e.g. hero "Verjaardagskaarten"). */
.kr-display {
    font-family: var(--kr-font-heading);
    font-size: var(--kr-text-display);
    line-height: var(--kr-leading-tight);
    color: var(--kr-heading);
}

.kr-display--pink {
    color: var(--kr-accent);
}

/* ---- Inline elements --------------------------------------------------- */
p {
    margin: 0 0 var(--kr-space-4);
}

a {
    color: var(--kr-link);
    text-decoration: none;
    transition: color var(--kr-transition-fast);
}

a:hover,
a:focus {
    color: var(--kr-link-hover);
}

strong,
b {
    font-weight: var(--kr-weight-semibold);
}

small,
.kr-text-sm {
    font-size: var(--kr-text-sm);
}

.kr-text-muted {
    color: var(--kr-text-muted);
}

/*
 * NOTE: There is deliberately NO eyebrow / kicker-label component.
 * Per brand direction, small uppercase labels above headings must NOT be used
 * anywhere in page designs, and must not be invented ad hoc. See CLAUDE.md.
 * (Form <label>s and the styleguide's own .sg-label annotations are unrelated
 * and remain fine.)
 */