/* ============================================================
   KONTUR — Design Tokens
   Single source of truth for colour, type, spacing, motion.
   Concept: A — Editorial Roastery (Stage 1 selected).
   ============================================================ */

:root {
  /* --- Palette — warm, earthy, craft ----------------------- */
  --paper:    #F4EFE4;   /* background — warm paper cream        */
  --paper-2:  #EBE3D2;   /* alternating / deeper section         */
  --surface:  #FBF8F1;   /* cards, raised surfaces               */
  --ink:      #221B12;   /* primary text, primary CTA bg (AAA)   */
  --ink-70:   #574B3B;   /* secondary text — 7.4:1 AAA           */
  --ink-45:   #8A7E6B;   /* muted — large text / decoration only */
  --clay:     #A6542F;   /* accent, links — 4.7:1 AA             */
  --olive:    #6E6A45;   /* secondary accent — raw bean          */
  --ember:    #C8773B;   /* highlight / hover                    */
  --line:     #D9CDB3;   /* hairlines, borders                   */

  /* State colours */
  --ok:       #3F6B43;   /* success — valid field, confirmation  */
  --ok-bg:    #E5EBDD;
  --error:    #A12E22;   /* validation error — distinct from clay */
  --error-bg: #F4E1DC;
  --info-bg:  #E8E8D8;

  /* RGB channels for rgba() compositing */
  --paper-rgb: 244, 239, 228;
  --ink-rgb:   34, 27, 18;

  /* --- Typography ----------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale — heading upper bounds kept moderate so
     long German compounds never overflow (BLOCK 16-A). */
  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 4.75rem);
  --fs-h1:      clamp(2.15rem, 1.5rem + 2.8vw, 3.35rem);
  --fs-h2:      clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h4:      1.0625rem;
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      0.875rem;    /* 14px */
  --fs-xs:      0.75rem;     /* 12px */

  --lh-heading: 1.08;        /* >= 1.05 — diacritics never clip   */
  --lh-body:    1.62;

  /* --- Spacing — one rhythm system (BLOCK 16-B) ----------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --section-pad: clamp(3.5rem, 2rem + 6vw, 7rem);  /* only vertical rhythm */

  /* --- Layout --------------------------------------------- */
  --page-max: 1280px;
  --page-narrow: 920px;
  --gutter:    clamp(1.25rem, 0.5rem + 3.4vw, 3.5rem);
  --radius:    2px;         /* editorial = near-square corners    */
  --radius-lg: 4px;
  --header-h:  4.75rem;

  /* Forms */
  --control-h: 48px;       /* >= 48px tap target (BLOCK 13)      */
  --control-border: 1.5px;

  /* --- Motion (BLOCK 9 — L1/L2, restrained) --------------- */
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:    0.45s;
  --dur-sm: 0.25s;

  /* --- Z-index scale -------------------------------------- */
  --z-header:  50;
  --z-sticky:  40;
  --z-drawer-overlay: 90;
  --z-drawer:  100;
  --z-cookie:  120;
  --z-skiplink: 200;
}

@media (max-width: 1024px) { :root { --header-h: 4.25rem; } }