/* SHAPE — hairlines over shadows, and square corners.

   THE HOUSE RULE, and the strongest visual rule in the system:
   BOXES ARE SQUARE. THE ONLY CURVE IS A CIRCLE.

   Every container, card, button, band, table, well, chip and input has a
   radius of zero. The drafting feel comes from straight edges meeting at
   right angles — a rounded box reads as off-brand immediately, which is why
   radius does NOT ride the size ladder: there is nothing for it to ride.
   Circles (status dots, layer dots, avatars) are fully round, because a
   circle is a mark, not a box.

   Two radii exist beyond those: 2px on the focus ring (so the ring reads as
   a ring, not a second border) and 4px on inline code chips only. Both are
   closed exceptions with exactly one job each.

   THE STROKE SCALE IS COMPLETE AT THREE VALUES. No other width is permitted,
   in CSS or in SVG:
     1px    hairline — rules, borders, grid lines, diagram connectors
     1.5px  mark     — diagram band outlines and zone edges
     2px    emphasis — the active indicator, the callout edge, answer lines,
                       and UI glyph strokes

   IN SVG, WRITE THE TOKEN, NOT THE NUMBER:
     stroke-width="var(--stroke-hairline)"
   var() resolves in presentation attributes, so the rule stays greppable —
   a literal number in a stroke-width attribute is an adherence failure that
   a search can find. Audit with:
     grep -o 'stroke-width="[^"]*"' | grep -v 'var(--stroke-'

   DEPTH IS A HAIRLINE. The default card is a surface plus a 1px rule and NO
   shadow. Shadow is reserved for things that genuinely float, and the list is
   closed: dropdown, modal, sheet, toast, drag clone. No inner shadows. */
:root{
  --radius-square:0;      /* every box. The default and the rule. */
  --radius-ring:2px;      /* focus ring only */
  --radius-code:4px;      /* inline code chips only */
  --radius-full:999px;    /* circles — dots, avatars, marks */

  --stroke-hairline:1px;
  --stroke-mark:1.5px;
  --stroke-emphasis:2px;

  --border-width:var(--stroke-hairline);

  /* region strokes — layout, not marks. The identity strip is 3px because it
     is a page region, and it is the only 3px in the system. */
  --strip-height:3px;

  --shadow-1:0 1px 2px rgba(21,25,30,.04);          /* raised surface */
  --shadow-2:0 4px 16px rgba(21,25,30,.08);         /* dropdown, popover */
  --shadow-3:0 14px 40px -22px rgba(21,25,30,.45);  /* modal, sheet */
  --shadow-drag:0 8px 24px rgba(21,25,30,.12);      /* drag clone */
  --shadow-above:0 -4px 16px rgba(21,25,30,.08);    /* I7 · a thing pinned at the bottom casts UP */

  --z-base:0;
  --z-sticky:50;
  --z-dropdown:200;
  --z-scrim:300;
  --z-modal:400;
  --z-toast:500;

  /* ---- deprecated · the single flat radius. Alias only; resolves to square. */
  --radius:var(--radius-square);
  --shadow-card:var(--shadow-1);
  --shadow-lift:var(--shadow-3);
}

/* I7 · Dark elevation is a raised ground plus the hairline, never a shadow
   alone — a 4% black shadow on a near-black ground is invisible, and the
   closed list of floating things would lose its only cue. Resting shadow
   goes to none; the overlay shadows deepen. Not a fourth elevation. */
[data-theme="dark"]{
  --shadow-1:none;
  --shadow-2:0 4px 16px rgba(0,0,0,.45);
  --shadow-3:0 14px 40px -22px rgba(0,0,0,.85);
  --shadow-drag:0 8px 24px rgba(0,0,0,.5);
  --shadow-above:0 -4px 16px rgba(0,0,0,.45);
}