/* GENERATED by build.py from design/tokens.css - do not edit this copy. */
/* ============================================================
   Lateral Intelligence - design tokens
   Direction B "Field": warm linen ground, one deep navy ink,
   a faint 12-column field of guide lines, a light grotesk for
   display and a small serif for reading.

   The one source of truth for both surfaces:
     www.lateralintelligence.org   assets/style.css
     lateralthinker (the demo)     apps/lateralthinker/static/style.css

   Custom properties only - no selectors beyond :root, no component
   styles. build.py copies this file to site/assets/tokens.css and
   apps/lateralthinker/static/tokens.css; edit it here, never the copies.
   ============================================================ */

:root {
  /* ---------- ground and ink ---------- */
  --color-bg:             #f2efe7;   /* linen */
  --color-surface:        #f8f6f0;   /* raised panels: question box, TL;DR, code */
  --color-surface-border: #e0dbcf;
  --color-plate:          #e8e3d6;   /* figure plates behind card art */
  --color-ink:            #15172a;   /* headings, emphasis: navy-black */
  --color-body:           #2d2f3d;   /* running text (12.6:1 on bg) */
  --color-muted:          #5f6070;   /* captions, meta (5.5:1 on bg) */
  --color-faint:          #85858f;   /* hints, labels at small size only */
  --color-ghost:          rgba(21, 23, 42, 0.28);   /* placeholders, idle borders */
  --color-rule:           #d6d1c4;   /* hairlines */
  --color-rule-soft:      #e3dfd4;
  --color-selection:      #cfd3ea;

  /* ---------- accent: the lab's one colour ---------- */
  --color-accent:           #18268a;   /* field navy: the mark, links, the motif */
  --color-accent-strong:    #0e1763;   /* hover / pressed */
  --color-accent-border:    #b9bedc;
  --color-accent-underline: #a9b0d8;
  --color-accent-wash:      #e1e2ec;   /* accent at ~10% on linen */

  /* ---------- status (demo states: warming, failed) ---------- */
  --color-warn:   oklch(0.55 0.13 72);
  --color-danger: oklch(0.52 0.16 28);

  /* ---------- type ----------
     Display and labels: a light geometric grotesk. Reading: a small serif.
     Machine text: a plain mono. Every stack is complete without webfonts. */
  --font-display: "Hanken Grotesk", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Hanken Grotesk", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   Newsreader, Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* type scale (px at desktop; the stylesheets step them down on phones) */
  --text-hero:    46px;   /* home headline, light */
  --text-title:   44px;   /* post / page titles, light */
  --text-h2:      28px;
  --text-h3:      21px;
  --text-card:    22px;   /* card titles */
  --text-body:    18px;   /* serif reading size */
  --text-small:   15px;   /* captions, meta */
  --text-label:   12.5px; /* sans labels, pills */

  /* ---------- the field: grid and measure ---------- */
  --page-max:    1280px;   /* outer frame, guide lines included */
  --page-pad:    40px;     /* side gutter; 16px on phones */
  --grid-cols:   12;       /* 4 on phones */
  --gridline:    rgba(24, 38, 138, 0.075);   /* the faint vertical guides */
  --measure:     68ch;     /* prose column */
  --radius-pill: 999px;

  /* linen: two crossed fractal-noise layers, a few percent of ink, tiled */
  --texture-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .31 0 0 0 0 .24 .12 0 0 0 -.03'/%3E%3C/filter%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .012' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .31 0 0 0 0 .24 .10 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");

  /* ---------- the mark: a square, a gap, the name ---------- */
  --mark-size: 10px;
  --mark-gap:  11px;
}