/*
 * Afterglow: design tokens. The only place these colors, radii and font stacks are defined;
 * skin.css reads them and never hardcodes its own.
 *
 * The accent comes from the page's one nonce'd accent block (DESIGN §4.8), set from the Look
 * page: a preset (blue #0b8cfe, cyan #22c3e6, violet #a78bfa, ember #ff7a45) or any color the
 * owner picks. The skin draws with --lb-accent-ink, the accent moved just far enough toward white
 * to read as text on --ag-card (4.5:1), so a dark custom color still passes AA everywhere it is
 * used: as text, as a fill under --ag-bg text, and as an edge. Every preset passes as it is, so
 * for them ink and accent are the same color. Hover is 20% toward white.
 *
 * Contrast (WCAG 2.x ratios; AA = 4.5 for body text):
 *                          on --ag-bg   on --ag-raised   on --ag-card
 *   --ag-text                17.66          16.75            16.22
 *   --ag-muted                6.44           6.11             5.92
 *   --ag-faint                4.94           4.68             4.53
 *   --ag-accent (blue)        5.88           5.58             5.40
 *   --ag-accent (cyan)        9.51           9.02             8.73
 *   --ag-accent (violet)      7.33           6.95             6.73
 *   --ag-accent (ember)       7.71           7.31             7.08
 * Text ON an accent fill is --ag-bg, which reads at the same ratios (contrast is symmetric).
 * tests/links/skins/ContrastTest.php checks every preset and the worst custom colors.
 */

:root {
  color-scheme: dark;

  /* Surfaces */
  --ag-bg: #07090c;
  --ag-raised: #0e1116;
  --ag-card: #11151b;
  --ag-border: #232932;
  --ag-border-strong: #2f3742;

  /* Text */
  --ag-text: #f3f1ec;
  --ag-muted: #8b93a1;
  --ag-faint: #777f8c;

  /* Accent (the default preset, blue, until the accent block sets its own) */
  --ag-accent: var(--lb-accent-ink, #0b8cfe);
  --ag-accent-hover: color-mix(in srgb, var(--ag-accent) 80%, white);
  --ag-accent-glow: var(--lb-accent-glow, rgba(11, 140, 254, 0.45));

  /* Status */
  --ag-danger: #ff6b6b;
  --ag-success: #3ddc97;
  --ag-warning: #ffc145;

  /* Type. Body, buttons and small tracked caps are Montserrat in every pairing. */
  --ag-font-body: "Montserrat Variable", "Montserrat Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ag-font-caps: var(--ag-font-body);

  /* Display titles, set by the pairing on <html data-type="signature|extended|condensed">. */
  --ag-font-display: "Montserrat Variable", "Montserrat Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ag-display-weight: 800;
  --ag-display-stretch: 100%;
  --ag-display-tracking: -0.02em;
  --ag-display-leading: 1.02;
  --ag-display-scale: 1;

  /* Shape */
  --ag-radius-sm: 10px;
  --ag-radius: 14px;
  --ag-radius-lg: 20px;

  /* Tracking for uppercase text */
  --ag-track-caps: 0.08em;
  --ag-track-wide: 0.35em;
}

/* Type pairings. The attribute goes on <html>; on any other element it scopes the pairing. */
[data-type="signature"] {
  --ag-font-display: "Montserrat Variable", "Montserrat Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ag-display-weight: 800;
  --ag-display-stretch: 100%;
  --ag-display-tracking: -0.02em;
  --ag-display-leading: 1.02;
  --ag-display-scale: 1;
}

[data-type="extended"] {
  --ag-font-display: "Archivo Expanded", "Archivo Expanded Fallback", "Arial Black", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ag-display-weight: 850;
  --ag-display-stretch: 125%;
  --ag-display-tracking: -0.01em;
  --ag-display-leading: 0.98;
  --ag-display-scale: 0.82;
}

[data-type="condensed"] {
  --ag-font-display: "Anton", "Anton Fallback", Impact, "Arial Narrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ag-display-weight: 400;
  --ag-display-stretch: 100%;
  --ag-display-tracking: 0.005em;
  --ag-display-leading: 0.95;
  --ag-display-scale: 1.25;
}