/* ─────────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS — the designer owns this file.
   Theme: light mode, Made design system values.
   Keep contrast ≥ 4.5:1 for text. Status colors verified on #FFFFFF below.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Typography */
  --font-ui: "Geist", system-ui, sans-serif;
  --font-display: "Geist", system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  /* Surfaces */
  --ground: #FAFAFA;       /* page background */
  --raised: #FFFFFF;       /* cards */
  --raised-2: #F5F5F5;     /* secondary surfaces / nested */
  --line: #E5E5E5;         /* borders */
  --line-input: #737373;   /* input / hairline borders */

  /* Text — all ≥ 4.5:1 on #FAFAFA */
  --ink: #171717;          /* primary  — 18:1 */
  --soft: #525252;         /* secondary — 7.3:1 */
  --muted: #737373;        /* helper / placeholder — 4.5:1 */

  /* Brand / actions */
  --accent: #171717;       /* primary CTA background */
  --accent-2: #525252;     /* secondary accent */
  --on-accent: #FFFFFF;    /* text on primary CTA */

  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space:   16px;         /* alias kept for existing components */
  --space-6: 24px;
  --space-8: 32px;

  /* Radii */
  --radius:     12px;      /* cards */
  --radius-sm:  8px;       /* small chips, inputs */
  --radius-pill: 9999px;   /* buttons, badges */

  /* No decorative shadows */
  --shadow: none;

  /* Status — 5 purchase states, all ≥ 4.5:1 on #FFFFFF */
  --status-requested:  #2563A8;  /* steel blue  — 6.1:1  in queue     */
  --status-authorized: #5B21B6;  /* deep violet — 8.9:1  approved      */
  --status-settled:    #0A7B73;  /* deep teal   — 5.1:1  payment moved */
  --status-verified:   #1E7A46;  /* forest green — 4.9:1 confirmed      */
  --status-refused:    #B3261E;  /* crimson     — 6.3:1  refused        */

  /* Legacy aliases consumed by components.css */
  --ok:  #1E7A46;    /* verified / unlocked — 4.9:1 */
  --warn: #8A5A00;   /* pending / locked    — 5.5:1 */
  --bad:  #B3261E;   /* refused             — 6.3:1 */

  /* Icon tile tints — product card header (not status colors) */
  --icon-report-bg:    #EEF3FB;
  --icon-report-fg:    #1D4C8C;  /* 7.2:1 on --icon-report-bg */
  --icon-snapshot-bg:  #FEF9EC;
  --icon-snapshot-fg:  #8A5A00;  /* 5.5:1 on white, same as --warn */
  --icon-guide-bg:     #F3EEFF;
  --icon-guide-fg:     #4C1D9C;  /* 9.0:1 on --icon-guide-bg */
  --icon-default-bg:   #F5F5F5;
  --icon-default-fg:   #525252;  /* same as --soft */

  /* Seller badge pills — outline style; no green (green = verified) */
  --badge-demo-bg:            #EEF3FB;
  --badge-demo-color:         #1D4C8C;  /* blue — 7.2:1 on badge bg */
  --badge-demo-border:        #BFCFE8;
  --badge-independent-bg:     #F3EEFF;
  --badge-independent-color:  #4C1D9C;  /* violet — 9.0:1 on badge bg */
  --badge-independent-border: #D4C5F0;
}

/* ── Shared across the four products, the presenter view and the video (engineering additions, in this light theme;
   the designer may retune any value) ── */
:root {
  /* type scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 22px;
  --text-xl: 30px;
  --text-2xl: clamp(32px, 5vw, 56px);
  --tracking-label: .12em;

  /* evidence states beyond the five purchase states */
  --status-simulated: #A21CAF;   /* fuchsia — local simulator, never a real network (6.0:1 on white) */
  --status-pending:   var(--warn);
  --status-rehearsal: var(--warn);   /* real, but an earlier run */
  --net-mainnet: var(--status-settled);
  --net-devnet:  var(--warn);

  /* layout */
  --page-max: 1280px;
  --gutter: 24px;
  --gutter-sm: 16px;

  /* motion — the app, the presenter view and the video read the same values */
  --motion-enter: 700ms;
  --motion-step: 450ms;
  --motion-exit: 400ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}