/* ──────────────────────────────────────────────────────────────────
 * Klats-Klats — colors_and_type.css
 * Drop-in CSS variables + base type for every Klats-Klats artifact.
 * The brand is dominated by electric purple #6C0CF2 with sliced
 * typographic glyphs — strict palette, no gradients, no shadows.
 * ────────────────────────────────────────────────────────────────── */

/* ─── Fonts ──────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter Display";
  src: url("./fonts/InterDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("./fonts/InterDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("./fonts/InterDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("./fonts/InterDisplay-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Color · Primary (dominant) ──────────────────────────────── */
  --kk-primary:        #6C0CF2;  /* electric purple — backgrounds, headlines, CTAs */
  --kk-accent:         #99F1FF;  /* icy cyan — highlights, ghosting, single accents */
  --kk-subtle:         #E9EFF7;  /* off-white wash — section fills, soft surfaces */
  --kk-white:          #FFFFFF;  /* pure white */

  /* ─── Color · Auxiliary (callouts only, never dominant) ──────── */
  --kk-text-primary:   #000000;  /* headlines, body */
  --kk-text-secondary: #999999;  /* labels, metadata */
  --kk-negative:       #FF4D6A;  /* errors, alerts */
  --kk-positive:       #14CC8F;  /* confirmed, positive stats */
  --kk-warning:        #FFEC1A;  /* promo labels, attention */

  /* ─── Semantic foreground / background tokens ────────────────── */
  --fg1:               #000000;  /* primary text on light surfaces */
  --fg2:               #999999;  /* secondary text */
  --fg-on-primary:     #FFFFFF;  /* text on purple */
  --fg-on-accent:      #000000;  /* text on cyan */
  --bg1:               #FFFFFF;  /* default background */
  --bg2:               #E9EFF7;  /* soft alt background */
  --bg-primary:        #6C0CF2;  /* purple surface */
  --bg-accent:         #99F1FF;  /* cyan surface */
  --bg-black:          #000000;  /* full black surface (rare) */
  --hairline:          #000000;  /* default border (always solid 1–2px, never grey) */

  /* ─── Type · families & roles ────────────────────────────────── */
  --font-body: "Inter Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Display", system-ui, -apple-system, sans-serif;

  /* Type ladder — fixed three-role system */
  --type-regular-weight: 400;
  --type-bold-weight:    700;
  --type-black-weight:   900;

  /* Type sizes — display heavy, no fluffy mid-sizes */
  --t-hero:     clamp(64px, 9vw, 160px);  /* ALL CAPS Black hero callouts */
  --t-display:  72px;                     /* Bold display headers */
  --t-h1:       56px;
  --t-h2:       40px;
  --t-h3:       28px;
  --t-h4:       20px;
  --t-body-lg:  20px;
  --t-body:     16px;
  --t-small:    14px;
  --t-micro:    12px;

  /* Line heights */
  --lh-tight:   0.9;    /* hero / all-caps */
  --lh-display: 1.0;
  --lh-snug:    1.1;
  --lh-normal:  1.4;
  --lh-loose:   1.55;

  /* Letter spacing — Inter Display likes negative tracking on display */
  --ls-hero:     -0.04em;
  --ls-display:  -0.02em;
  --ls-tight:    -0.01em;
  --ls-normal:   0em;
  --ls-allcaps:  0em;     /* ALL CAPS at Black weight needs no tracking */

  /* ─── Spacing scale (4px base) ───────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ─── Radii ──────────────────────────────────────────────────── */
  --r-0:    0;        /* default — sharp edges */
  --r-sm:   4px;      /* form inputs */
  --r-md:   8px;      /* very rare — only when explicitly needed */
  --r-pill: 999px;    /* badges, capsules — used sparingly */

  /* ─── Borders (no soft greys; black or brand color only) ─────── */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-thick: 4px;

  /* ─── Layout ─────────────────────────────────────────────────── */
  --container-max: 1280px;
  --gutter:        var(--s-5);
}

/* ─── Base / reset-ish ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-weight: var(--type-regular-weight);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Semantic type ─────────────────────────────────────────────── */
.kk-hero,
h1.kk-hero {
  font-family: var(--font-display);
  font-weight: var(--type-black-weight);
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  margin: 0;
}

h1, .kk-h1 {
  font-family: var(--font-display);
  font-weight: var(--type-bold-weight);
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
}

h2, .kk-h2 {
  font-family: var(--font-display);
  font-weight: var(--type-bold-weight);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

h3, .kk-h3 {
  font-family: var(--font-display);
  font-weight: var(--type-bold-weight);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

h4, .kk-h4 {
  font-family: var(--font-display);
  font-weight: var(--type-bold-weight);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  margin: 0;
}

p, .kk-body {
  font-family: var(--font-body);
  font-weight: var(--type-regular-weight);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  margin: 0 0 var(--s-4) 0;
}

.kk-body-lg {
  font-size: var(--t-body-lg);
  line-height: var(--lh-loose);
}

.kk-small  { font-size: var(--t-small);  line-height: var(--lh-normal); }
.kk-micro  { font-size: var(--t-micro);  line-height: var(--lh-normal); }

/* Loud accent text — hero callouts, graphic accents */
.kk-accent-text {
  font-family: var(--font-display);
  font-weight: var(--type-black-weight);
  text-transform: uppercase;
  letter-spacing: var(--ls-allcaps);
  line-height: var(--lh-tight);
}

/* Eyebrow — small, bold, all caps; for section labels */
.kk-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--type-bold-weight);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 3px; }

::selection { background: var(--kk-primary); color: var(--kk-white); }