/* ============================================================
   KHARAAYO INC — COLOR & TYPE FOUNDATIONS
   Source of truth: extracted from the production marketing site
   (Next.js + Tailwind v3.4). Import this file first in any artifact.
   ============================================================ */

/* ---------- WEBFONTS ---------- */
/* Display face — Druk Wide (Bold 700). Self-hosted from /fonts.
   Used for h1–h3 and all-caps display headlines. */
@font-face {
  font-family: "Druk Wide";
  src: url("fonts/DrukWide-Bold.woff2") format("woff2"),
       url("fonts/DrukWide-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Body face — Inter (variable 100–900). Pulled from Google Fonts CDN.
   The production site self-hosts Inter via next/font; CDN is an exact match. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  /* ===== SURFACES (light, default) ===== */
  --background:           #ffffff;
  --background-soft:      #fefffe;
  --background-elevated:  #f4f4f5;

  /* ===== TEXT ===== */
  --foreground:           #0f0f10;
  --foreground-muted:     #52525b;
  --foreground-soft:      #6f6f74;

  /* ===== BRAND ===== */
  --accent-color:         #ff5a4d;  /* signature coral-red — the Kharaayo rabbit */
  --accent-hover:         #ff4a3b;  /* darker coral on hover */
  --accent-light:         #ff6b61;  /* lighter coral, icon hover */
  --logo-red:             #ff403b;  /* pure logo-mark red (vector glyph fill) */
  --primary-color:        #5b52ff;  /* indigo — CTAs, gradient overlays */
  --primary-dark:         #575ad6;  /* indigo in dark mode */
  --brand:                #ccfd51;  /* electric lime — accent highlights, hover */
  --brand-deep:           #a1fc4e;  /* deeper lime on press/hover */

  /* ===== NEUTRAL / ZINC SCALE ===== */
  --zinc-50:   #fafafa;
  --zinc-100:  #f4f4f5;
  --zinc-200:  #e4e4e7;
  --zinc-300:  #d4d4d8;
  --zinc-400:  #a1a1aa;
  --zinc-500:  #71717a;
  --zinc-600:  #52525b;
  --zinc-700:  #3f3f46;
  --zinc-800:  #27272a;
  --zinc-900:  #18181b;

  /* ===== SOCIAL / UTILITY ===== */
  --whatsapp:  #25d366;
  --telegram:  #229ed9;
  --discord:   #5865f2;
  --selection: rgba(0, 100, 255, 0.30);

  /* ===== TYPE FAMILIES ===== */
  --font-display: "Druk Wide", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ===== RADII ===== */
  --radius-sm:   6px;    /* inputs, small chips (rounded-md) */
  --radius-md:   8px;    /* menu items, cards-in-menu (rounded-lg) */
  --radius-card: 20px;   /* standard image/content card (rounded-2xl) */
  --radius-lg:   24px;   /* large feature card (rounded-[24px]) */
  --radius-pill: 9999px; /* buttons, tags, circular icon buttons */

  /* ===== ELEVATION ===== */
  --shadow-sm:   0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 45px rgba(0,0,0,.35);
  --ring-hairline: inset 0 0 0 1px rgba(0,0,0,.1);

  /* ===== MOTION ===== */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);
  --ease-in:       cubic-bezier(.4, 0, 1, 1);
  --reveal-dur:    .6s;   /* section fade-up on scroll-into-view */
  --hover-dur:     .2s;   /* color/bg/border transitions */
  /* Springy "back" + "elastic" curves used by the morphing pill CTA */
  --ease-back:    linear(0,.3412 4.06%,.6411 8.2%,.9005 12.43%,1.1205 16.77%,1.3013 21.22%,1.4438 25.8%,1.549 30.54%,1.6175 35.47%,1.6528 43.52%,1.5562 56.74%,1.4899 61.5%,1.202 78.86%,1.0551 89.79%,1.0061 96.75%,1);
}

.dark {
  --background:           #000000;
  --background-soft:      #0f0f10;
  --background-elevated:  #18181b;
  --foreground:           #ffffff;
  --foreground-muted:     #a1a1aa;
  --foreground-soft:      #d4d4d8;
  --primary-color:        #575ad6;
}

/* ============================================================
   SEMANTIC TYPE RAMP
   Headlines use Druk Wide, all-caps, tight tracking.
   Sizes are the production scale (clamped for responsive use).
   ============================================================ */
.k-display {            /* hero headline */
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  font-size: clamp(2.5rem, 6vw, 4.5rem);  /* ~40 → 72px */
}
h1, .k-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(2.25rem, 5vw, 3.75rem); /* 36 → 60px */
}
h2, .k-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(1.875rem, 3.5vw, 3rem);  /* 30 → 48px */
}
h3, .k-h3 {
  /* Sub-heads frequently drop to Inter semibold (medium weight, not caps) */
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(1.25rem, 2vw, 1.875rem); /* 20 → 30px */
}
.k-eyebrow {            /* small bold all-caps label above a heading */
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--foreground-muted);
}
.k-lead {               /* large intro paragraph */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.5rem);   /* 20 → 24px */
  line-height: 1.5;
  text-wrap: pretty;
}
p, .k-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--foreground);
}
.k-small {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--foreground-muted);
}
code, .k-mono {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}

::selection { background: var(--selection); }