/* DAP 2026 design tokens. Served at /assets/tokens.css and loaded first on every page.
   The only site stylesheet allowed to hold colour values. Source: brand kit 02-Colour.
   Translucent values are the same four brand colours at a set opacity, for flat scrims,
   hairlines on photographs and the button wash. Never a gradient. */
:root {
  --dap-carbon: #111517;
  --dap-graphite: #23262A;
  --dap-warm-white: #F8F9FA;
  --dap-vermilion: #D8412F;
  --dap-white: #FFFFFF;

  /* Carbon theme (default) */
  --bg: #111517;
  --surface: #23262A;
  --ink: #F8F9FA;
  --ink-muted: #A3A7AD;
  --hairline: #2E3236;
  --rule: #6B7178;
  --signal: #D8412F;
  --focus: #F8F9FA;
  --ink-strong: #FFFFFF;

  /* Reading Room values, for single elements set on carbon (inverted boxes) */
  --rr-bg: #F8F9FA;
  --rr-surface: #FFFFFF;
  --rr-ink: #111517;
  --rr-ink-muted: #5B6168;
  --rr-hairline: #E1E4E8;
  --rr-rule: #8A9097;

  /* Flat scrims: carbon at a set opacity, values per artboard */
  --scrim-12: rgba(17, 21, 23, 0.12);
  --scrim-16: rgba(17, 21, 23, 0.16);
  --scrim-18: rgba(17, 21, 23, 0.18);
  --scrim-26: rgba(17, 21, 23, 0.26);
  --scrim-34: rgba(17, 21, 23, 0.34);
  --scrim-44: rgba(17, 21, 23, 0.44);

  /* Solid translucent panels as drawn */
  --panel-carbon-70: rgba(17, 21, 23, 0.70);
  --panel-carbon-72: rgba(17, 21, 23, 0.72);
  --panel-carbon-82: rgba(17, 21, 23, 0.82);
  --panel-carbon-86: rgba(17, 21, 23, 0.86);
  --panel-graphite-94: rgba(35, 38, 42, 0.94);

  /* Warm white at a set opacity: lines and text on photographs, the button wash */
  --photo-line-10: rgba(248, 249, 250, 0.10);
  --photo-line-12: rgba(248, 249, 250, 0.12);
  --photo-line-16: rgba(248, 249, 250, 0.16);
  --photo-line-18: rgba(248, 249, 250, 0.18);
  --photo-ink-72: rgba(248, 249, 250, 0.72);
  --photo-ink-80: rgba(248, 249, 250, 0.80);
  --photo-ink-88: rgba(248, 249, 250, 0.88);
  --photo-chip: rgba(248, 249, 250, 0.70);
  --photo-control: rgba(248, 249, 250, 0.60);
  --wash: rgba(248, 249, 250, 0.10);
  --wash-soft: rgba(248, 249, 250, 0.06);

  /* Type */
  --font-display: "Raleway", "Archivo", system-ui, sans-serif;
  --font-sans: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Strokes and radius */
  --stroke: 1px;
  --stroke-signal: 3px;
  --radius: 0;
  --radius-small: 2px;
  --radius-icon: 18%;
}

/* Reading Room: for reading. Bands, reading views, legal pages, the Ledger explorer, tables. */
[data-theme="reading-room"] {
  --bg: #F8F9FA;
  --surface: #FFFFFF;
  --ink: #111517;
  --ink-muted: #5B6168;
  --hairline: #E1E4E8;
  --rule: #8A9097;
  --focus: #111517;
  --ink-strong: #111517;
}

/* Carbon again, for the shell and inverted boxes inside a Reading Room band. */
[data-theme="carbon"] {
  --bg: #111517;
  --surface: #23262A;
  --ink: #F8F9FA;
  --ink-muted: #A3A7AD;
  --hairline: #2E3236;
  --rule: #6B7178;
  --focus: #F8F9FA;
  --ink-strong: #FFFFFF;
}

/* Reading Room washes for the Ledger explorer: carbon at a set opacity. */
:root {
  --rr-wash: rgba(17, 21, 23, 0.04);
  --rr-wash-strong: rgba(17, 21, 23, 0.08);
}