/* WhatNext design tokens — Swiss / International Typographic Style.
   Reference mockups: the "WhatNext — Web Frontend Design" canvas. */
:root {
  /* Color: black/white ground, one accent. Red is reserved for rank #1 / P0,
     urgency (due today, blocked, allocation gaps), suggestion labels and the
     single primary action in a group. Never decorative. */
  --wn-ink:        #111111;
  --wn-paper:      #FFFFFF;
  --wn-panel:      #F4F4F2;  /* sidebar, suggested rows */
  --wn-muted:      #5C5C5C;  /* secondary text, 6.6:1 on paper */
  --wn-rule:       #D4D4D4;  /* row separators */
  --wn-rule-faint: #EBEBEB;  /* outline rows, bar tracks */
  --wn-accent:     #D50000;  /* 5.5:1 on paper; white on it 5.5:1 */

  /* Type: one grotesque family, weight + size carry the hierarchy. */
  --wn-font: "Inter Tight", Helvetica, Arial, sans-serif;
  --wn-display: 800 128px/0.85 var(--wn-font);   /* page title, -0.05em */
  --wn-h1-mobile: 800 64px/0.9 var(--wn-font);
  --wn-h2: 800 28px/1.1 var(--wn-font);           /* -0.02em */
  --wn-rank: 800 48px/0.9 var(--wn-font);         /* 01–07, -0.04em */
  --wn-item: 600 21px/1.2 var(--wn-font);
  --wn-body: 400 15px/1.45 var(--wn-font);
  --wn-meta: 400 14px/1.4 var(--wn-font);
  --wn-label: 600 12px/1.2 var(--wn-font);        /* uppercase, 0.12em */
  --wn-label-tracking: 0.12em;

  /* Rules: structure comes from horizontal rules, not boxes or shadows. */
  --wn-rule-heavy: 8px solid var(--wn-ink);   /* under page titles */
  --wn-rule-strong: 2px solid var(--wn-ink);  /* table heads/foots, cards */
  --wn-rule-thin: 1px solid var(--wn-rule);
  --wn-rule-accent: 4px solid var(--wn-accent); /* observation cards, active nav */

  /* Space: 8px base. */
  --wn-s1: 4px; --wn-s2: 8px; --wn-s3: 12px; --wn-s4: 16px;
  --wn-s5: 24px; --wn-s6: 32px; --wn-s7: 48px; --wn-s8: 56px;

  /* Layout */
  --wn-nav-w: 200px;
  --wn-sidebar-w: 360px;
  --wn-main-pad: 40px 56px 64px;
  --wn-touch: 44px;   /* minimum target */
  --wn-radius: 0;     /* square everything */
}

/* Tabular figures everywhere: ranks, hours, dates align. */
body { font-family: var(--wn-font); font-feature-settings: "tnum" 1; color: var(--wn-ink); background: var(--wn-paper); }