/* ============================================================
   kamper.dev — design tokens (authentic)
   Reconciled with the live site: logo teal #009689, UI accent
   #00bba6, deep #005f5a, ink #202020, warm stone canvas #fafaf9.
   Naming: --k-<group>-<role>. Use these, not raw hex.
   ============================================================ */
:root {
  /* ── Brand teals ─────────────────────────────────────── */
  --k-teal:        #009689;   /* logo mark · primary brand        */
  --k-teal-bright: #00bba6;   /* UI accent · hover · highlights    */
  --k-teal-deep:   #005f5a;   /* headings · pressed · depth        */
  --k-teal-wash:   #e6f4f1;   /* tinted surface (very light teal)  */

  /* ── Ink & warm neutrals (stone) ─────────────────────── */
  --k-ink:     #202020;       /* headings · wordmark               */
  --k-body:    #292524;       /* body copy (stone-800-ish)         */
  --k-grey:    #78716c;       /* meta · muted (stone-500)          */
  --k-faint:   #a8a29e;       /* placeholders · captions (stone-400)*/
  --k-line:    #e7e5e4;       /* hairlines · dividers (stone-200)  */
  --k-surface: #fafaf9;       /* page canvas (stone-50)            */
  --k-paper:   #ffffff;       /* cards · print paper               */

  /* ── Type ────────────────────────────────────────────── */
  --k-font:      "Switzer", ui-sans-serif, system-ui, sans-serif;
  --k-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  /* variable weight axis 100–900 — kamper.dev's expressive stops */
  --k-w-light:    240;
  --k-w-regular:  360;
  --k-w-medium:   500;
  --k-w-semibold: 580;
  --k-w-bold:     800;

  --k-text-xs:   .72rem;
  --k-text-sm:   .82rem;
  --k-text-md:   .92rem;
  --k-text-base: 1rem;
  --k-text-lg:   1.2rem;
  --k-text-xl:   1.6rem;
  --k-text-2xl:  2rem;
  --k-text-3xl:  2.6rem;
  --k-text-4xl:  3.4rem;

  --k-leading-tight:  1.15;
  --k-leading-snug:   1.3;
  --k-leading-normal: 1.55;
  --k-leading-loose:  1.7;
  --k-tracking-wide:  .14em;   /* eyebrows / small-caps labels     */
  --k-tracking-tight: -.02em;  /* large display                    */

  /* ── Space ───────────────────────────────────────────── */
  --k-space-1: .25rem;  --k-space-2: .5rem;  --k-space-3: .75rem;
  --k-space-4: 1rem;    --k-space-5: 1.5rem; --k-space-6: 2rem;
  --k-space-7: 3rem;    --k-space-8: 4rem;   --k-space-9: 6rem;

  /* ── Radius ──────────────────────────────────────────── */
  --k-radius-sm:   .25rem;
  --k-radius-md:   .375rem;   /* default                          */
  --k-radius-lg:   .625rem;
  --k-radius-xl:   1rem;
  --k-radius-pill: 9999px;

  /* ── Border & elevation ──────────────────────────────── */
  --k-border-width: 1px;
  --k-border:  1px solid var(--k-line);
  --k-shadow-sm: 0 1px 2px rgba(32,32,32,.04);
  --k-shadow:    0 1px 2px rgba(32,32,32,.05), 0 8px 24px -12px rgba(32,32,32,.12);
  --k-shadow-lg: 0 2px 4px rgba(32,32,32,.05), 0 24px 48px -20px rgba(32,32,32,.18);

  /* ── Breakpoints (reference) ─────────────────────────── */
  --k-bp-sm: 640px; --k-bp-md: 768px; --k-bp-lg: 1024px;
  --k-bp-xl: 1280px; --k-bp-2xl: 1536px;
}

/* Self-hosted Switzer (files live in ./fonts/). */
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Variable.woff2") format("woff2"),
       url("fonts/Switzer-Variable.woff")  format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-VariableItalic.woff2") format("woff2"),
       url("fonts/Switzer-VariableItalic.woff")  format("woff");
  font-weight: 100 900; font-style: italic; font-display: swap;
}