/* =============================================================================
   KC Inks — design tokens
   Self-hosted faces first, then the custom properties everything else reads.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Cinzel — headings, nav, buttons
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cinzel-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/cinzel-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/cinzel-700.woff2') format('woff2');
}

/* -----------------------------------------------------------------------------
   Montserrat — body, forms, admin
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/montserrat-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/montserrat-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-600.woff2') format('woff2');
}

/* -----------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {

    /* Brand ---------------------------------------------------------------- */
    --kc-cream: #F3EFE9;
    --kc-black: #111111;
    --kc-taupe: #A89D93;
    --kc-gray:  #C7C2BC;
    --kc-mauve: #B48996;

    /* Derived -------------------------------------------------------------- */
    --kc-cream-deep: #EAE4DB;
    --kc-black-soft: #1C1C1C;

    /* Mauve pressed/hover fill, roughly 8% darker. Fill only, never text. */
    --kc-mauve-deep: #A67985;

    /* Ink versions, for the cases where the accent has to BE text on cream.
       Contrast against --kc-cream (#F3EFE9):
         --kc-mauve      2.5:1   fails   fills and accents only
         --kc-mauve-deep 3.2:1   fails   fills only
         --kc-mauve-ink  6.2:1   passes AA
         --kc-taupe      2.3:1   fails   borders, dividers, decorative meta
         --kc-muted-ink  5.2:1   passes AA, for muted text that must be read */
    --kc-mauve-ink: #7A4A57;
    --kc-muted-ink: #6E6259;

    /* Type ----------------------------------------------------------------- */
    --ff-display: 'Cinzel', Georgia, 'Times New Roman', serif;
    --ff-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    --fs-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);
    --fs-sm:   clamp(0.8125rem, 0.78rem + 0.2vw,  0.875rem);
    --fs-base: clamp(0.9375rem, 0.90rem + 0.25vw, 1.0625rem);
    --fs-lg:   clamp(1.0625rem, 1.00rem + 0.35vw, 1.25rem);
    --fs-xl:   clamp(1.25rem,   1.13rem + 0.6vw,  1.5rem);
    --fs-2xl:  clamp(1.5rem,    1.30rem + 1.0vw,  2rem);
    --fs-3xl:  clamp(1.875rem,  1.55rem + 1.6vw,  2.75rem);
    --fs-4xl:  clamp(2.25rem,   1.70rem + 2.8vw,  4rem);

    --lh-tight: 1.15;
    --lh-snug:  1.35;
    --lh-body:  1.7;

    /* Display type is set in small caps rhythm; this is the tracking it wants. */
    --ls-display: 0.06em;
    --ls-button:  0.08em;

    /* Space — 4px base ----------------------------------------------------- */
    --sp-1:  0.25rem;   /*  4px */
    --sp-2:  0.5rem;    /*  8px */
    --sp-3:  0.75rem;   /* 12px */
    --sp-4:  1rem;      /* 16px */
    --sp-5:  1.25rem;   /* 20px */
    --sp-6:  1.5rem;    /* 24px */
    --sp-7:  2rem;      /* 32px */
    --sp-8:  2.5rem;    /* 40px */
    --sp-9:  3rem;      /* 48px */
    --sp-10: 4rem;      /* 64px */
    --sp-11: 5rem;      /* 80px */
    --sp-12: 6rem;      /* 96px */

    /* Section padding scales with viewport but stays inside the rhythm above. */
    --sp-section: clamp(3rem, 2rem + 5vw, 6rem);

    /* Shape ---------------------------------------------------------------- */
    --radius: 2px;

    --shadow-soft: 0 1px 2px rgba(17, 17, 17, 0.04), 0 2px 8px rgba(17, 17, 17, 0.06);
    --shadow-lift: 0 2px 4px rgba(17, 17, 17, 0.06), 0 12px 28px rgba(17, 17, 17, 0.12);

    /* Motion --------------------------------------------------------------- */
    --transition: 240ms cubic-bezier(.4, 0, .2, 1);

    /* Layout --------------------------------------------------------------- */
    --measure: 68ch;
    --container-max: 1200px;
    --header-h: 88px;
}