/* ============================================================
   KERNEL — Design tokens (colors & type)
   Source: KERNEL Design System / colors_and_type.css
   Fonts are loaded via <link> in the document head.
   ============================================================ */

:root {
  /* ---------- Brand fonts ---------- */
  --font-display: 'Chakra Petch', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Neutral scale — warm ink → paper ---------- */
  --ink-950: #08080A;
  --ink-900: #0E0E11;
  --ink-800: #18181C;
  --ink-700: #26262B;
  --ink-600: #3A3A40;
  --ink-500: #5A5A60;
  --ink-400: #84848C;
  --ink-300: #A8A8AE;
  --ink-200: #C9C9CC;
  --ink-100: #E4E3DE;
  --paper-50: #F6F5F1;
  --paper-0:  #FFFFFF;

  /* ---------- Signal accent — restrained ---------- */
  --signal:      #FF5C2C;
  --signal-hi:   #FF7A4F;
  --signal-low:  #D63E13;
  --signal-tint: rgba(255, 92, 44, 0.12);

  /* ---- Categorical accents — one per product app ---- */
  --acc-inventory: #C6F500;
  --acc-security:  #16E0D8;
  --acc-activity:  #FF2E88;
  --acc-damage:    #FF5C2C;

  /* ---------- Functional / semantic (data states only) ---------- */
  --verified: #2FA968;
  --alert:    #E5484D;
  --watch:    #E8A435;
  --info:     #3B82C4;

  /* ---------- Semantic tokens — dark surfaces ---------- */
  --d-bg:        var(--ink-950);
  --d-surface:   var(--ink-900);
  --d-raised:    var(--ink-800);
  --d-fg:        #F4F2EC;
  --d-fg-2:      var(--ink-400);
  --d-fg-3:      var(--ink-500);
  --d-hairline:  rgba(255,255,255,0.14);
  --d-hairline-strong: rgba(255,255,255,0.28);
  --d-chip-bg:   rgba(255,255,255,0.08);

  /* ---------- Semantic tokens — light surfaces ---------- */
  --l-bg:        var(--paper-50);
  --l-surface:   var(--paper-0);
  --l-fg:        var(--ink-950);
  --l-fg-2:      #6B6B66;
  --l-fg-3:      #9A9A94;
  --l-hairline:  rgba(8,8,10,0.12);
  --l-hairline-strong: rgba(8,8,10,0.26);
  --l-chip-bg:   rgba(8,8,10,0.05);

  /* ---------- Type scale ---------- */
  --t-display:   clamp(48px, 7vw, 104px);
  --t-h1:        clamp(34px, 4.4vw, 60px);
  --t-h2:        clamp(26px, 3vw, 40px);
  --t-h3:        20px;
  --t-body-lg:   18px;
  --t-body:      16px;
  --t-small:     14px;
  --t-eyebrow:   12px;
  --t-micro:     11px;

  --lh-tight:    0.98;
  --lh-display:  1.02;
  --lh-heading:  1.08;
  --lh-body:     1.5;

  --tr-display:  -0.03em;
  --tr-heading:  -0.02em;
  --tr-body:     -0.005em;
  --tr-eyebrow:  0.16em;

  /* ---------- Spacing — 4px base ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px; --sp-11: 160px;

  /* ---------- Radii — near-square ---------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-pill: 999px;

  /* ---------- Borders — hairlines do the work ---------- */
  --bw-hair: 1px;
  --bw-bold: 2px;

  --bracket-len: 14px;
  --bracket-w:   2px;

  --ease: cubic-bezier(.2,0,0,1);
}

/* ---------- Base type classes ---------- */
.kdisplay {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
.kh1 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h1); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); text-wrap: balance; }
.kh2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }
.kh3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-h3); line-height: 1.2; letter-spacing: var(--tr-heading); }
.kbody-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-lg); line-height: var(--lh-body); letter-spacing: var(--tr-body); }
.kbody { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); }
.ksmall { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-small); line-height: 1.45; }

.keyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.kmono { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-small); letter-spacing: 0; }
.kstat { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px,5vw,72px); line-height: 1; letter-spacing: var(--tr-display); font-feature-settings: "tnum" 1; }