/* ────────────────────────────────────────────────────────────────────────
   kindatool.com — Design Tokens
   Source of truth for colors, type, spacing, radii, shadows, easing.
   ──────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

:root {

  /* ── Colors — Neutrals ──────────────────────────────────────────────── */
  --kt-white:   #FFFFFF;
  --kt-off:     #FAFAF8;   /* warm off-white surface */
  --kt-warm:    #F5F3EF;   /* warmer surface */
  --kt-ink:     #0D0D0D;   /* primary text / footer bg */
  --kt-ink-2:   #404040;   /* secondary text */
  --kt-ink-3:   #767676;   /* tertiary text / sub-copy */
  --kt-ink-4:   #B0B0B0;   /* placeholder / disabled */
  --kt-line:    #E8E5E0;   /* hairline border */
  --kt-line-2:  #F0EDE8;   /* lighter hairline */

  /* ── Colors — Brand (PDF red is the primary brand color) ───────────── */
  --kt-red:        #C9152A;
  --kt-red-dark:   #A0101E;
  --kt-red-pale:   #FFF0F1;
  --kt-red-tint:   #FFDDE0;

  /* ── Colors — Category accents ─────────────────────────────────────── */
  --kt-cat-imagine:  #2563EB;   /* blue   */
  --kt-cat-pdf:      #C9152A;   /* red    */
  --kt-cat-convert:  #D97706;   /* amber  */
  --kt-cat-compress: #059669;   /* green  */
  --kt-cat-calc:     #0284C7;   /* cyan   */

  /* Pale tints for category icon wells */
  --kt-cat-imagine-pale:  #EFF6FF;
  --kt-cat-pdf-pale:      #FFF0F1;
  --kt-cat-convert-pale:  #FFF7ED;
  --kt-cat-compress-pale: #ECFDF5;
  --kt-cat-calc-pale:     #E0F2FE;

  /* ── Colors — Semantic ─────────────────────────────────────────────── */
  --kt-fg:         var(--kt-ink);
  --kt-fg-muted:   var(--kt-ink-3);
  --kt-fg-faint:   var(--kt-ink-4);
  --kt-bg:         var(--kt-white);
  --kt-bg-alt:     var(--kt-off);
  --kt-bg-warm:    var(--kt-warm);
  --kt-bg-dark:    #080810;   /* the "how it works" section */
  --kt-border:     var(--kt-line);
  --kt-accent:     var(--kt-red);

  /* ── Type — Families ───────────────────────────────────────────────── */
  --kt-ff-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --kt-ff-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Type — Scale (semantic) ───────────────────────────────────────── */
  --kt-fs-display: clamp(44px, 6.5vw, 84px);  /* hero h1 */
  --kt-fs-h1:      clamp(40px, 5.5vw, 72px);  /* category hero */
  --kt-fs-h2:      clamp(28px, 3.5vw, 42px);  /* section title */
  --kt-fs-h3:      22px;                      /* card title */
  --kt-fs-lg:      18px;
  --kt-fs-body:    15px;
  --kt-fs-sm:      13.5px;
  --kt-fs-xs:      12px;
  --kt-fs-eyebrow: 11px;                      /* uppercase labels */

  /* ── Type — Weights ────────────────────────────────────────────────── */
  --kt-fw-light:    300;
  --kt-fw-regular:  400;
  --kt-fw-medium:   500;
  --kt-fw-semibold: 600;
  --kt-fw-bold:     700;

  /* ── Spacing ──────────────────────────────────────────────────────── */
  --kt-pad:    clamp(20px, 4vw, 56px);   /* outer page padding */
  --kt-max:    1360px;                   /* content max width */
  --kt-gap-1:  4px;
  --kt-gap-2:  8px;
  --kt-gap-3:  12px;
  --kt-gap-4:  16px;
  --kt-gap-5:  24px;
  --kt-gap-6:  32px;
  --kt-gap-7:  48px;
  --kt-gap-8:  64px;
  --kt-gap-9:  96px;
  --kt-section-y: 80px;                  /* vertical section padding */

  /* ── Radii ────────────────────────────────────────────────────────── */
  --kt-r-xs:  5px;
  --kt-r-sm:  7px;
  --kt-r-md:  10px;
  --kt-r-lg:  14px;
  --kt-r-xl:  20px;
  --kt-r-2xl: 28px;
  --kt-r-pill: 100px;

  /* ── Shadows ──────────────────────────────────────────────────────── */
  --kt-shadow-1: 0 1px 3px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
  --kt-shadow-2: 0 8px 32px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --kt-shadow-3: 0 20px 40px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.02);
  --kt-shadow-modal: 0 32px 80px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.08);
  --kt-shadow-focus: 0 0 0 4px rgba(201,21,42,.08);

  /* ── Easing & Motion ──────────────────────────────────────────────── */
  --kt-ease:     cubic-bezier(.16, 1, .3, 1);
  --kt-ease-out: cubic-bezier(.25, .46, .45, .94);
  --kt-ease-spring: cubic-bezier(.175, .885, .32, 1.275);
  --kt-dur-fast:   150ms;
  --kt-dur-base:   250ms;
  --kt-dur-slow:   400ms;
  --kt-dur-reveal: 600ms;
}

/* ────────────────────────────────────────────────────────────────────────
   Semantic element styles
   Apply these to plain HTML to get the brand look.
   ──────────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--kt-ff-sans);
  background: var(--kt-bg);
  color: var(--kt-fg);
  font-size: var(--kt-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--kt-accent); color: #fff; }

a { color: inherit; text-decoration: none; }
a.kt-link { color: var(--kt-accent); border-bottom: 1px solid transparent; transition: border-color var(--kt-dur-fast); }
a.kt-link:hover { border-bottom-color: currentColor; }

/* — Display + headings — */
.kt-display, h1.kt-display {
  font-family: var(--kt-ff-serif);
  font-size: var(--kt-fs-display);
  font-weight: var(--kt-fw-regular);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--kt-ink);
}
.kt-display em, h1 em, h2 em { font-style: italic; color: var(--kt-accent); }

h1, .kt-h1 {
  font-family: var(--kt-ff-serif);
  font-size: var(--kt-fs-h1);
  font-weight: var(--kt-fw-regular);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

h2, .kt-h2 {
  font-family: var(--kt-ff-serif);
  font-size: var(--kt-fs-h2);
  font-weight: var(--kt-fw-regular);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

h3, .kt-h3 {
  font-family: var(--kt-ff-serif);
  font-size: var(--kt-fs-h3);
  font-weight: var(--kt-fw-regular);
  letter-spacing: -0.015em;
}

/* — Body — */
p, .kt-body {
  font-size: var(--kt-fs-body);
  color: var(--kt-fg);
  line-height: 1.7;
}
.kt-sub {
  font-size: var(--kt-fs-lg);
  color: var(--kt-fg-muted);
  line-height: 1.7;
}
small, .kt-small { font-size: var(--kt-fs-sm); color: var(--kt-fg-muted); }

/* — Eyebrow / section label — */
.kt-eyebrow, .section-label {
  font-family: var(--kt-ff-sans);
  font-size: var(--kt-fs-eyebrow);
  font-weight: var(--kt-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kt-fg-faint);
}

/* — Mono / code-like — */
code, kbd, .kt-mono {
  font-family: var(--kt-ff-sans);
  font-size: 11px;
  font-weight: var(--kt-fw-medium);
  background: var(--kt-bg-alt);
  border: 1px solid var(--kt-line);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--kt-ink-3);
  box-shadow: 0 1px 0 var(--kt-line);
}