/* Skins (§8 v2) — density, corner radius and typeface. A skin sets NO
   colours: that is the palette's job, and keeping the two axes apart is why
   there are a dozen palettes rather than a list of forty combined names.

   Everything here reads a token declared in tokens.css, so the default needs
   no skin at all and a skin that only changes the typeface does not have to
   restate the spacing. No hex appears in this file, which is what keeps
   acceptance #16 true.

   The influences are deliberate and shallow: enough that the app feels at
   home on a machine, not an imitation of its widgets. */

/* Aqua — Mac. Rounder, roomier, the system stack. */
[data-skin="aqua"] {
  --r: 8px;
  --density: 1.15;
  --pad-x: 16px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Instrument Sans', sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, 'IBM Plex Mono', monospace;
}
[data-skin="aqua"] .btn,
[data-skin="aqua"] .chip { border-radius: 6px; }
[data-skin="aqua"] .box { border-radius: 4px; }

/* Redmond — Windows. Square, tighter, Segoe. */
[data-skin="redmond"] {
  --r: 2px;
  --density: 0.9;
  --pad-x: 12px;
  --font-sans: 'Segoe UI', 'Segoe UI Variable', system-ui, 'Instrument Sans', sans-serif;
  --font-mono: 'Cascadia Mono', Consolas, 'IBM Plex Mono', monospace;
}
[data-skin="redmond"] .btn,
[data-skin="redmond"] .chip,
[data-skin="redmond"] .box { border-radius: 0; }

/* Terminal — everything monospaced, nothing rounded, as dense as it reads.
   Pairs with the terminal palette, but the two are independent on purpose. */
[data-skin="terminal"] {
  --r: 0px;
  --density: 0.8;
  --pad-x: 10px;
  --font-sans: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-skin="terminal"] .btn,
[data-skin="terminal"] .chip,
[data-skin="terminal"] .box,
[data-skin="terminal"] .card { border-radius: 0; }
[data-skin="terminal"] .date-big { letter-spacing: 0; font-weight: 600; }
[data-skin="terminal"] .rail-item.on { box-shadow: inset 2px 0 0 var(--body); }

/* Roomy — no house style, just more air. For a large screen, or for anyone
   who finds the default tight. */
[data-skin="roomy"] {
  --r: 4px;
  --density: 1.35;
  --pad-x: 18px;
}

/* Compact — the opposite. More on screen, nothing else changed. */
[data-skin="compact"] {
  --r: 3px;
  --density: 0.72;
  --pad-x: 10px;
}