/* ============================================================
   KN Constructions — Design Tokens (DNA)
   Every CSS file must reference these variables, never raw values.
   Palette: ink + paper + brass. Type: Inter + Lora.
   ============================================================ */

:root {
  /* ---------- COLOR: Core ---------- */
  --kn-ink:          #0E0E10;   /* primary text, dark sections      */
  --kn-ink-soft:     #26262B;   /* body text on light               */
  --kn-ink-muted:    #4A4A52;   /* secondary text                   */
  --kn-slate:        #5A5A66;   /* tertiary text, meta              */
  --kn-slate-light:  #8A8A96;   /* disabled, dividers               */

  --kn-paper:        #FAF7F2;   /* warm off-white bg                */
  --kn-paper-2:      #F2EDE5;   /* section alt bg                   */
  --kn-paper-3:      #E8E1D5;   /* card bg on paper                 */

  --kn-white:        #FFFFFF;

  /* ---------- COLOR: Accent (brass) ---------- */
  --kn-brass:        #B8934D;   /* primary CTA, links, key accents  */
  --kn-brass-deep:   #8F7038;   /* hover/active                     */
  --kn-brass-light:  #D4B87A;   /* soft highlight                   */
  --kn-brass-soft:   rgba(184, 147, 77, 0.12);  /* tinted bg        */
  --kn-brass-ring:   rgba(184, 147, 77, 0.35);  /* focus ring       */

  /* ---------- COLOR: Semantic ---------- */
  --kn-success:      #4C7A5A;
  --kn-warning:      #C2803E;
  --kn-error:        #B0473D;

  /* ---------- COLOR: Lines ---------- */
  --kn-line:         rgba(14, 14, 16, 0.08);
  --kn-line-strong:  rgba(14, 14, 16, 0.16);
  --kn-line-inverse: rgba(255, 255, 255, 0.12);

   /* ---------- TYPE: Families ---------- */
  --kn-font-sans:  "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kn-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* ---------- TYPE: Weights ---------- */
  --kn-fw-regular:  400;
  --kn-fw-medium:   500;
  --kn-fw-semibold: 600;
  --kn-fw-bold:     700;

  /* ---------- TYPE: Fluid scale (clamp = responsive) ---------- */
  --kn-fs-xs:      clamp(0.75rem,  0.71rem + 0.20vw, 0.875rem);  /* 12 → 14 */
  --kn-fs-sm:      clamp(0.875rem, 0.84rem + 0.20vw, 1.00rem);   /* 14 → 16 */
  --kn-fs-base:    clamp(1.00rem,  0.96rem + 0.20vw, 1.125rem);  /* 16 → 18 */
  --kn-fs-lg:      clamp(1.125rem, 1.08rem + 0.30vw, 1.375rem);  /* 18 → 22 */
  --kn-fs-xl:      clamp(1.375rem, 1.28rem + 0.45vw, 1.750rem);  /* 22 → 28 */
  --kn-fs-2xl:     clamp(1.750rem, 1.55rem + 1.00vw, 2.500rem);  /* 28 → 40 */
  --kn-fs-3xl:     clamp(2.250rem, 1.85rem + 2.00vw, 3.750rem);  /* 36 → 60 */
  --kn-fs-4xl:     clamp(3.000rem, 2.20rem + 4.00vw, 5.500rem);  /* 48 → 88 */
  --kn-fs-display: clamp(3.500rem, 2.20rem + 6.50vw, 7.500rem);  /* 56 → 120 */

  /* ---------- TYPE: Line heights ---------- */
  --kn-lh-tight:   1.1;
  --kn-lh-snug:    1.25;
  --kn-lh-normal:  1.5;
  --kn-lh-relaxed: 1.65;

  /* ---------- TYPE: Letter spacing ---------- */
  --kn-ls-tight:  -0.03em;
  --kn-ls-snug:   -0.015em;
  --kn-ls-normal: 0;
  --kn-ls-wide:   0.08em;
  --kn-ls-eyebrow:0.16em;   /* small uppercase labels */

  /* ---------- SPACING (8pt grid) ---------- */
  --kn-space-1:  4px;
  --kn-space-2:  8px;
  --kn-space-3:  12px;
  --kn-space-4:  16px;
  --kn-space-5:  24px;
  --kn-space-6:  32px;
  --kn-space-7:  48px;
  --kn-space-8:  64px;
  --kn-space-9:  96px;
  --kn-space-10: 128px;

  /* ---------- RADIUS ---------- */
  --kn-radius-sm:   6px;
  --kn-radius-md:   12px;
  --kn-radius-lg:   20px;
  --kn-radius-xl:   28px;
  --kn-radius-full: 9999px;

  /* ---------- SHADOW (warm, soft, layered) ---------- */
  --kn-shadow-sm:
    0 1px 2px rgba(14, 14, 16, 0.04);
  --kn-shadow-md:
    0 4px 12px -2px rgba(14, 14, 16, 0.06),
    0 2px 4px  -2px rgba(14, 14, 16, 0.04);
  --kn-shadow-lg:
    0 12px 32px -8px rgba(14, 14, 16, 0.10),
    0 4px  8px  -4px rgba(14, 14, 16, 0.05);
  --kn-shadow-xl:
    0 24px 64px -16px rgba(14, 14, 16, 0.14),
    0 8px  16px -8px  rgba(14, 14, 16, 0.06);

  /* ---------- GLASS (header, modals) ---------- */
  --kn-glass-bg:     rgba(250, 247, 242, 0.72);
  --kn-glass-bg-dark:rgba(14, 14, 16, 0.62);
  --kn-glass-border: rgba(255, 255, 255, 0.55);
  --kn-glass-blur:   20px;
  --kn-glass-sat:    180%;
  --kn-glass-shadow:
    0 8px 32px -8px rgba(14, 14, 16, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);

  /* ---------- MOTION ---------- */
  --kn-dur-fast: 180ms;
  --kn-dur-base: 280ms;
  --kn-dur-slow: 480ms;

  --kn-ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --kn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --kn-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- LAYOUT ---------- */
  --kn-container-sm:  720px;
  --kn-container-md:  960px;
  --kn-container-lg: 1200px;
  --kn-container-xl: 1440px;
  --kn-container-pad: clamp(1.25rem, 3vw, 3rem);

  --kn-header-h: 76px;

  /* ---------- Z-INDEX ---------- */
  --kn-z-base:     1;
  --kn-z-header: 100;
  --kn-z-overlay: 400;
  --kn-z-modal:  500;
  --kn-z-toast:  900;
}