/* Kortaga foundation: the one shared file of tokens every surface is built on.

   THE BAR IS THE 10-06 REFERENCE (`the-level-he-wants.jpg`, Dendrite Gravitas's ruling of 2026-10-14,
   after David graded the live door 0/10: "Colors from Anthropic. Tacky design. Reverse engineering not
   done."). Sampled from the reference itself: the ground (16,18,17), the darkest panel (8,8,8), a header
   band (24,25,27), panels the same fill as the page held by one-pixel hairlines, white and grey type in
   a neutral grotesk, and one colour in the whole frame, a small blue mark. Depth comes from the page's
   own hierarchy (the darkest panel, then the page, then the band) and from hairlines, never from a
   glow, a gradient or a cast shadow.

   What this replaces: a warm ladder lit like a room (a radial glow on the ground, gradient cards with a
   gold rim and a three-layer cast shadow, terracotta buttons, an orange focus ring), drawn to Ruskin's
   drill on roundness. The six rounds that built it are in the account-home notes. The reference has no
   lit solids in it, so the drill had nothing to apply to, and David's grade says so.

   The class names are kept (.ground, .raised, .recessed, .btn-primary, .layer-1, .layer-4), because
   kortaga.com's own pages use them; what they draw is the reference's. The colour tokens keep their
   old names for the same reason, and each says below what it holds now. */

:root{
  /* SURFACES, from the reference */
  --ground:        #101211;   /* the page */
  --ground-glow:   #101211;   /* no glow: equal to the page, kept so older pages still resolve */
  --surface-1:     #080808;   /* the darkest panel, a rail or a sidebar */
  --surface-2:     #101211;   /* a panel or a card: the same fill as the page, held by its hairline */
  --surface-2-lit: #101211;   /* no lit top any more; kept so older pages still resolve */
  --well:          #101211;   /* a field: the page's own fill inside a stronger hairline */
  --well-lit:      #101211;
  --surface-4:     #18191b;   /* the header band, a hovered or selected row */

  /* HAIRLINES. --seam holds a panel to the page, about 13 levels above it as the reference does;
     --seam-strong is a field's or a button's edge, 4.24:1 against the page: WCAG 1.4.11 asks 3:1, and
     the margin keeps it above that where a 1 px edge falls on a half pixel and blurs (the blind
     grade measured 2.11:1 there at 3.02:1). Neutral, never warm. */
  --seam:        #1f2120;
  --seam-strong: #767879;

  /* THE ACCENT TOKENS ARE NEUTRAL NOW. The reference carries no hue in its chrome, so the primary
     action is the reference's own light value as a fill, and the active state is white. */
  --oxide:  #f4f5f7;   /* the primary action's fill (was terracotta) */
  --ember:  #ffffff;   /* focus and the active state (was orange) */
  --umber:  #3a3c3d;   /* quiet weight, a destructive row before it is touched (was brown-red) */
  /* An error has a colour of its own, the one hue the door keeps, because an error has to read as an
     error. 9.47:1 on the page. */
  --danger: #ff9e94;

  /* TEXT. --ink-lo reaches 7:1 on the page (the house floor for labels), which the old warm grey did
     not (4.42:1, measured on the reference's page). */
  --ink-hi:  #f4f5f7;   /* primary text */
  --ink-mid: #b1b3b5;   /* labels, secondary text */
  --ink-lo:  #9e9e9e;   /* tertiary text, placeholders */

  /* TYPE. A neutral grotesk, as the reference sets: Inter, self-hosted by the house (luyml.com/fonts),
     declared once per page by the page itself. */
  --font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --text-xs:  12.5px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  20px;
  --text-xl:  28px;
  --text-xxl: 40px;

  /* SPACING, an 8px module */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 12px;
}

.ground{ background:var(--ground); }
.layer-1{ background:var(--surface-1); }
/* a panel: the page's own fill, held by one hairline */
.raised{ background:var(--surface-2); border:1px solid var(--seam); }
/* a field: the page's fill inside a hairline strong enough to see */
.recessed{ background:var(--well); border:1px solid var(--seam-strong); }
.layer-4{ background:var(--surface-4); }

.btn-primary{
  background:var(--oxide); color:#0b0c0c; border:1px solid var(--oxide);
  border-radius:var(--radius-sm); font:inherit; font-size:var(--text-sm); font-weight:500;
  padding:11px 20px; cursor:pointer;
}
.btn-primary:hover{ background:#ffffff; border-color:#ffffff; }