/* getxtant.com design tokens. Retasc's design system (CLAUDE.md, "Design systems").
 *
 * Copied on 2026-10-08 (XTNT-35) from:
 *   ~/retasc/dash/src/styles/tokens.css  the shared tokens: grounds, inks, semantic accents,
 *                                        radii (the `:root` block and its light media block)
 *   ~/retasc/web/styles.css              the landing's own tokens: the panel ladder, the type
 *                                        scale, the section rhythm and the three face stacks
 * Canon: ~/retasc/operations/design-system.md (§Color, §Typography, §Spacing, and §retasc.com
 * "Elevation" and "Type scale"). Values are copied, never re-chosen: Retasc measured every one of
 * them (contrast, elevation steps) and its audits are the gate for changing them.
 *
 * Retasc-only families were left out (runtime hues, org marks, review and resume accents, the
 * Dash's shell metrics); take them from the same source when a page needs one.
 *
 * Protocol Dark is the default. Structural Light applies when the OS prefers light, as on
 * retasc.com. Retasc also writes the light palette a second time under :root[data-theme="light"]
 * for its ?theme= switch; this site has no switch yet, so it has only the media query block. Copy
 * the second block with the head script that sets data-theme, never one without the other.
 *
 * Added on 2026-10-09 (XTNT-106, the landing page), from ~/retasc/web/styles.css: --well-line
 * (the edge of an illustration inside a panel), the phone value of --t-section (30px under 640,
 * still one step of six) and --ease-move (its motion tokens).
 *
 * Xtant's overrides (brand/README.md, "Colour"; XTNT-25). Retasc's site has no brand accent: its
 * one filled act is --fg. Xtant's accent replaces nothing of Retasc's ladder; it is added as
 * --accent and --on-accent, with:
 *   --accent-hover, --accent-pressed  a filled accent control's hover and pressed fills, computed
 *                                     as 12% and 24% of the way toward --fg-strong (Retasc's own
 *                                     primary steps from --fg to --fg-strong on hover), so the ink
 *                                     on the fill only gains contrast. Measured with the WCAG
 *                                     formula: dark #1FB2ED 8.17 and #3DBCEF 9.10 with --on-accent;
 *                                     light #006E9B 5.67 and #005F86 7.04 with white.
 *   --accent-text                     the accent as small text (step numbers, a hovered link): the
 *                                     accent itself on dark (5.99 on --panel and --band, 7.27 on
 *                                     --bg); on light #005F86, because accentInk #007DB0 measures
 *                                     only 3.21 to 4.20 on the light grounds (4.91 on --band, 5.57
 *                                     on --bg, 6.42 on --panel). Marks and edges keep --accent (3:1).
 *   --logo-ink                        the brackets and the word of the lockup: brand ink1 #EDEDEC
 *                                     on dark (16.90 on --bg), paperInk #101114 on light (14.92).
 * Never X's blue #1D9BF0. */

:root {
  /* Grounds, outlines and inks (tokens.css). */
  --bg: #0a0a0a;
  --card: #202020; --card-border: #404040;
  --surface: #2e2e2e; --surface-border: #4d4d4d;
  --fg: #f0f0f0; --fg-strong: #fff;
  --ink: #cfcfcf; --secondary: #a9a9a9; --muted: #9a9a9a; --dim: #444;
  /* --dim is a decorative fill or a resting outline only; anything that must be SEEN takes --sep
     (design system §"--dim vs --sep"). */
  --sep: #7a7a7a;

  /* Semantic accents: small things only, a pill, a dot, a sentence (§Semantic accents). */
  --success: #4ade80; --success-bg: rgba(74,222,128,0.08); --success-border: rgba(74,222,128,0.32);
  --warning: #facc15; --warning-bg: rgba(250,204,21,0.08); --warning-border: rgba(250,204,21,0.34);
  --error: #f87171; --error-bg: rgba(248,113,113,0.08); --error-border: rgba(248,113,113,0.34);
  /* Retasc's focus ring; this site's ring takes --accent instead (styles.css), so it is unused here. */
  --link-blue: #5a9fd4;
  /* Xtant's brand accent (XTNT-25, brand/README.md): the logo's cursor and filled brand buttons.
     7.27 on --bg, 5.99 on --panel; a fill takes --on-accent (7.29). */
  --accent: #00A7EA; --on-accent: #0A0A06;
  --accent-hover: #1FB2ED; --accent-pressed: #3DBCEF;
  --accent-text: #00A7EA;
  --logo-ink: #EDEDEC;

  --shadow: rgba(0,0,0,0.4);
  --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-card: 10px; --radius-pill: 100px;

  /* Face stacks (web/styles.css): each real face, then its metric-matched fallback (styles.css),
     so the swap changes glyphs but not line breaks. */
  --mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;
  --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --display: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;

  /* The landing's elevation ladder (web/styles.css; design system §retasc.com "Elevation"):
       --bg #0a0a0a  -> --panel #202020        1.22 up (a panel on the page)
       --band #202020 -> --panel-sunk #0c0c0c  1.20 down (a panel inside a band)
       --panel #202020 -> --panel-inset #0c0c0c 1.20 down (a panel inside a panel) */
  --panel: #202020;
  --panel-sunk: #0c0c0c;
  --panel-inset: #0c0c0c;
  --panel-line: #2f2f2f;
  --band: #202020;
  --panel-edge: #2f2f2f;
  /* An illustration is a well inside its panel: no fill, this visible edge. */
  --well-line: #454545;

  /* Section rhythm: a section sits --sec-gap under the one before it; a band pads --band-pad
     inside and keeps --band-gap on both sides. Phones take the smaller set (styles.css). */
  --sec-gap: 56px; --band-gap: 48px; --band-pad: 44px;

  /* Type scale, six steps (design system §retasc.com "Type scale"). Mono is for values and
     identifiers only; prose is Inter. */
  --t-label: 11px; --t-value: 12.5px; --t-prose: 14px;
  --t-lead: 16px; --t-card: 20px; --t-section: 26px;

  /* Motion (web/styles.css, "Motion tokens"): travelling from one place to another on screen,
     at rest at both ends. The only curve this site uses so far (a button's arrow). */
  --ease-move: cubic-bezier(.4, 0, .2, 1);
}
/* The top step takes a phone value: at 342px a 26px head is only 1.3x the card titles under
   it. Still six steps; everything on --t-section moves together. */
@media (max-width: 640px) { :root { --t-section: 30px; } }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #E8E4DF; --card: #F1EDE7; --card-border: #b3aba1;
    --surface: #EAE6DF; --surface-border: #bcb5ac;
    --fg: #1a1a1a; --fg-strong: #000;
    --ink: #333; --secondary: #555; --muted: #666; --dim: #bbb; --sep: #767676;
    --success: #0c6e32; --success-bg: rgba(12,110,50,0.10); --success-border: rgba(12,110,50,0.34);
    --warning: #835a0e; --warning-bg: rgba(217,159,6,0.12); --warning-border: rgba(163,111,4,0.40);
    --error: #a8372a; --error-bg: rgba(168,55,42,0.09); --error-border: rgba(168,55,42,0.34);
    --link-blue: #226295;
    /* On light, brand/README.md's accentInk: 4.20 on --panel and 3.64 on --bg, so a fill or a mark,
       never body text on --bg; a fill takes white (4.60). */
    --accent: #007DB0; --on-accent: #FFFFFF;
    --accent-hover: #006E9B; --accent-pressed: #005F86;
    --accent-text: #005F86;
    --logo-ink: #101114;
    --shadow: rgba(0, 0, 0, 0.15);
    --panel: #F7F4EF; --panel-sunk: #F7F4EF; --panel-inset: #EAE6DF; --panel-line: #c6c0b6;
    --band: #DBD7D0; --panel-edge: #aea89c; --well-line: #c3bcb3;
  }
}