/* ============================================================
   Kwntm Design Tokens — Single Source of Truth
   Monochrome identity: black + white + warm grays
   All public-facing pages import this file first.
   ============================================================
   Breakpoints (reference only — CSS has no variable breakpoints):
     sm: 640px | md: 768px | lg: 1024px | xl: 1280px
   ============================================================ */

:root {
  /* ── Color: Core ────────────────────────────────────── */
  --k-black:    #0a0a0a;
  --k-white:    #ffffff;

  /* ── Color: Gray Scale (warm) ───────────────────────── */
  --k-gray-50:  #fafaf9;
  --k-gray-100: #f5f3f0;
  --k-gray-200: #e8e5e0;
  --k-gray-300: #d4d1cc;
  --k-gray-400: #a8a5a0; /* decorative only — 2.58:1 on white, fails AA */
  --k-gray-500: #6b6966; /* 5.59:1 on white — passes AA */
  --k-gray-600: #52504d; /* 7.54:1 on white — passes AAA */
  --k-gray-700: #3d3b39;
  --k-gray-800: #292826;
  --k-gray-900: #1a1918;

  /* ── Color: Semantic ────────────────────────────────── */
  --k-error:    #b91c1c; /* 7.17:1 — passes AAA */
  --k-error-bg: rgba(185, 28, 28, 0.06);
  --k-success:    #047857; /* 5.94:1 — passes AA */
  --k-success-bg: rgba(4, 120, 87, 0.08);
  --k-warning:    #92400e; /* 7.24:1 — passes AAA */
  --k-warning-bg: rgba(146, 64, 14, 0.08);

  /* ── Typography ─────────────────────────────────────── */
  --k-font: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --k-text-xs:   0.75rem;   /* 12px */
  --k-text-sm:   0.875rem;  /* 14px */
  --k-text-base: 1rem;      /* 16px */
  --k-text-lg:   1.125rem;  /* 18px */
  --k-text-xl:   1.25rem;   /* 20px */
  --k-text-2xl:  1.5rem;    /* 24px */
  --k-text-3xl:  1.875rem;  /* 30px */
  --k-text-4xl:  2.25rem;   /* 36px */
  --k-text-5xl:  3rem;      /* 48px */

  --k-leading-tight:   1.3;
  --k-leading-normal:  1.6;
  --k-leading-relaxed: 1.8;

  /* ── Spacing (8px base grid, 4px subdivisions) ──────── */
  --k-space-1:  4px;
  --k-space-2:  8px;
  --k-space-3:  12px;
  --k-space-4:  16px;
  --k-space-5:  20px;
  --k-space-6:  24px;
  --k-space-8:  32px;
  --k-space-10: 40px;
  --k-space-12: 48px;
  --k-space-16: 64px;
  --k-space-20: 80px;

  /* ── Border Radius ──────────────────────────────────── */
  --k-radius-sm:   6px;
  --k-radius-md:   12px;
  --k-radius-lg:   20px;
  --k-radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────── */
  --k-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --k-shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06);
  --k-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --k-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* ── Focus Ring ─────────────────────────────────────── */
  --k-ring:       0 0 0 3px rgba(10, 10, 10, 0.10);
  --k-ring-focus: 0 0 0 3px rgba(10, 10, 10, 0.18);

  /* ── Motion ─────────────────────────────────────────── */
  --k-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --k-duration: 0.3s;
}