/* Retrace — design tokens.
 *
 * Mirrors the @theme block in the landing's app/globals.css. The two must agree:
 * a customer moving from retrace.video to app.retrace.video should not be able
 * to tell they crossed a deployment boundary.
 *
 * Two rules carry most of the look, and both are enforced here rather than left
 * to judgement:
 *
 *   1. Green is scarce and always means the same thing — your money or your
 *      result. Nothing decorative is green.
 *   2. Every number is monospaced. Prices, timestamps, match percentages and
 *      URLs are all mono, because mono reads as a verifiable fact rather than
 *      as marketing.
 *
 * Deliberately light-only. The brand is evidence printed on off-white paper;
 * there is no dark mode, and adding one would make it two brands.
 */

:root {
  color-scheme: light;

  /* ---- palette ---- */
  --paper: #fafaf7;
  --card: #ffffff;
  --ink: #111213;
  --body: #3a3b3d;
  --fog: #8b8d91;
  --signal: #00c853;
  --signal-deep: #00a845;
  --evidence: #e5484d;
  --rule: #e4e4de;
  --rule-soft: #f0f0eb;
  --dash: #b9bab5;
  --ink-line: #4a4b4d;

  /* Tints, derived rather than picked, so they cannot drift from their source. */
  --signal-wash: color-mix(in srgb, var(--signal) 12%, transparent);
  --evidence-wash: color-mix(in srgb, var(--evidence) 10%, transparent);
  --ink-wash: color-mix(in srgb, var(--ink) 5%, transparent);

  /* ---- type ----
   * Archivo and JetBrains Mono, self-hosted alongside the binary so the app
   * matches the landing without a request to a font CDN — which the Content
   * Security Policy would refuse anyway. */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: clamp(19px, 2.4vw, 23px);
  --text-2xl: clamp(22px, 3vw, 28px);
  --text-3xl: clamp(26px, 3.7vw, 38px);
  --text-hero: clamp(28px, 5.2vw, 50px);

  --tracking-tight: -0.035em;
  --tracking-wide: 0.06em;
  --leading-tight: 1.05;
  --leading-normal: 1.55;

  /* ---- space ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 30px;
  --space-7: 44px;
  --space-8: 64px;
  --space-9: 96px;

  /* Corners are square. A forensic document does not have rounded corners, and
   * the one place a radius appears is a pill badge. */
  --radius: 0;
  --radius-pill: 999px;

  --shadow: 0 1px 0 var(--rule);
  --shadow-lift: 0 10px 30px -18px rgb(17 18 19 / 0.35);
  --ring: 0 0 0 2px var(--signal-deep);

  --dur-fast: 120ms;
  --dur-med: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --z-sticky: 10;
  --z-toast: 60;
  --z-modal: 70;

  --content-width: 880px;
  --wide-width: 1180px;
}

@keyframes rt-scan {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(180px);
  }
}

@keyframes rt-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes rt-pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}