/* Kevlex Digital design-system tokens — copied from design/_ds/.../tokens (fonts loaded in base.njk) */
/* Kevlex Digital — Color System
   Bright, yellow-forward. The brand mark yellow (#FFB800) leads; ink is
   near-black; surfaces are warm-white. Sampled from Kevlex-aOS-logo.png. */
:root {
  /* ── Brand yellow ramp ─────────────────────────────────────────── */
  --kx-yellow-50:  #FFF8E1;
  --kx-yellow-100: #FFEDB3;
  --kx-yellow-200: #FFE085;
  --kx-yellow-300: #FFD24D;
  --kx-yellow-400: #FFC21A;
  --kx-yellow-500: #FFB800; /* PRIMARY — the logo yellow */
  --kx-yellow-600: #E6A600; /* hover */
  --kx-yellow-700: #C28C00; /* pressed / on-light text-safe */
  --kx-yellow-800: #8A6300;
  --kx-yellow-900: #5C4200;

  /* ── Ink / neutral ramp (warm-tinted greys) ───────────────────── */
  --kx-ink:       #181818; /* headings, primary text — from logo wordmark */
  --kx-ink-900:   #232323;
  --kx-ink-700:   #3D3D3A;
  --kx-ink-600:   #56564F;
  --kx-ink-500:   #74736B; /* muted body */
  --kx-ink-400:   #9B9A8F; /* placeholder / disabled */
  --kx-ink-300:   #C9C7BC;
  --kx-ink-200:   #E4E1D6;
  --kx-ink-100:   #F0EDE4;
  --kx-ink-50:    #F8F6EF;

  /* ── Surfaces ──────────────────────────────────────────────────── */
  --kx-white:     #FFFFFF;
  --kx-cream:     #FFFDF7; /* warm page background */
  --kx-sand:      #F8F6EF; /* subtle panel tint */
  --kx-charcoal:  #181818; /* dark sections / footer */
  --kx-charcoal-2:#232323;

  /* ── Semantic status ───────────────────────────────────────────── */
  --kx-success:   #3F9E56;
  --kx-success-bg:#E5F3E9;
  --kx-warning:   #E6A600;
  --kx-warning-bg:#FFF3D6;
  --kx-error:     #D64545;
  --kx-error-bg:  #FBE7E7;
  --kx-info:      #3A6FD6;
  --kx-info-bg:   #E5EDFB;

  /* ── Semantic aliases (use these in components) ────────────────── */
  --kx-accent:            var(--kx-yellow-500);
  --kx-accent-hover:      var(--kx-yellow-600);
  --kx-accent-pressed:    var(--kx-yellow-700);
  --kx-accent-soft:       var(--kx-yellow-50);
  --kx-on-accent:         var(--kx-ink); /* dark text on yellow — high contrast */

  --kx-bg:                var(--kx-cream);
  --kx-surface:           var(--kx-white);
  --kx-surface-sunken:    var(--kx-sand);
  --kx-surface-inverse:   var(--kx-charcoal);

  --kx-text:              var(--kx-ink);
  --kx-text-muted:        var(--kx-ink-500);
  --kx-text-subtle:       var(--kx-ink-400);
  --kx-text-inverse:      var(--kx-cream);
  --kx-text-on-dark-muted: rgba(255,253,247,0.62);

  --kx-border:            var(--kx-ink-200);
  --kx-border-strong:     var(--kx-ink-300);
  --kx-hairline:          var(--kx-ink-100);
  --kx-hairline-dark:     rgba(255,253,247,0.12);
  --kx-focus-ring:        rgba(255,184,0,0.45);
}

/* Kevlex Digital — Typography
   One family, worked hard: Geist for everything visible, Geist Mono for
   labels, tags, metadata and code. Confident, geometric, no-fluff. */
:root {
  /* ── Families ──────────────────────────────────────────────────── */
  --kx-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kx-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --kx-font-display: var(--kx-font-sans); /* headings use heavy sans weights */

  /* ── Weights ───────────────────────────────────────────────────── */
  --kx-w-light: 300;    /* @kind font */
  --kx-w-regular: 400;  /* @kind font */
  --kx-w-medium: 500;   /* @kind font */
  --kx-w-semibold: 600; /* @kind font */
  --kx-w-bold: 700;     /* @kind font */
  --kx-w-extrabold: 800;/* @kind font */
  --kx-w-black: 900;    /* @kind font */

  /* ── Type scale (px) ───────────────────────────────────────────── */
  --kx-text-display: 72px;  /* hero */
  --kx-text-h1: 52px;
  --kx-text-h2: 38px;
  --kx-text-h3: 28px;
  --kx-text-h4: 22px;
  --kx-text-lg: 19px;   /* lead paragraph */
  --kx-text-base: 16px;
  --kx-text-sm: 14px;
  --kx-text-xs: 13px;
  --kx-text-label: 12px; /* mono eyebrow / tag */

  /* ── Line heights ──────────────────────────────────────────────── */
  --kx-lh-tight: 1.02;   /* @kind other */
  --kx-lh-snug: 1.15;    /* @kind other */
  --kx-lh-normal: 1.5;   /* @kind other */
  --kx-lh-relaxed: 1.65; /* @kind other */

  /* ── Letter spacing ────────────────────────────────────────────── */
  --kx-ls-display: -0.03em;  /* @kind other */
  --kx-ls-heading: -0.02em;  /* @kind other */
  --kx-ls-normal: 0;         /* @kind other */
  --kx-ls-label: 0.14em;     /* @kind other */
  --kx-ls-label-wide: 0.2em; /* @kind other */
}

/* Kevlex Digital — Spacing & layout
   4px base grid. Generous whitespace; editorial breathing room. */
:root {
  --kx-space-0: 0;
  --kx-space-1: 4px;
  --kx-space-2: 8px;
  --kx-space-3: 12px;
  --kx-space-4: 16px;
  --kx-space-5: 20px;
  --kx-space-6: 24px;
  --kx-space-8: 32px;
  --kx-space-10: 40px;
  --kx-space-12: 48px;
  --kx-space-16: 64px;
  --kx-space-20: 80px;
  --kx-space-24: 96px;
  --kx-space-32: 128px;

  /* Layout */
  --kx-page-pad: 56px;      /* horizontal page gutter */
  --kx-page-pad-sm: 24px;
  --kx-max-width: 1200px;   /* content column cap */
  --kx-max-prose: 640px;    /* readable text measure */
}

/* Kevlex Digital — Radii, borders, shadows, motion
   Soft-but-square: modest radii, crisp hairline borders, low-spread shadows
   with a faint warm tint. No heavy drop shadows, no glows. */
:root {
  /* ── Radii ─────────────────────────────────────────────────────── */
  --kx-radius-xs: 4px;
  --kx-radius-sm: 6px;
  --kx-radius-md: 10px;   /* buttons, inputs */
  --kx-radius-lg: 14px;   /* cards */
  --kx-radius-xl: 20px;   /* large panels */
  --kx-radius-pill: 999px;
  --kx-radius-circle: 50%;

  /* ── Border widths ─────────────────────────────────────────────── */
  --kx-border-hair: 1px;
  --kx-border-1: 1px;
  --kx-border-2: 2px;

  /* ── Shadows (warm-tinted, low spread) ─────────────────────────── */
  --kx-shadow-xs: 0 1px 2px rgba(24,24,24,0.06);
  --kx-shadow-sm: 0 2px 6px rgba(24,24,24,0.07);
  --kx-shadow-md: 0 6px 18px rgba(24,24,24,0.09);
  --kx-shadow-lg: 0 16px 40px rgba(24,24,24,0.12);
  --kx-shadow-yellow: 0 8px 24px rgba(255,184,0,0.28); /* accent lift on CTAs */
  --kx-shadow-inset: inset 0 1px 2px rgba(24,24,24,0.05);

  /* ── Motion ────────────────────────────────────────────────────── */
  --kx-ease: cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */
  --kx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --kx-dur-fast: 120ms; /* @kind other */
  --kx-dur: 180ms;      /* @kind other */
  --kx-dur-slow: 320ms; /* @kind other */
}