/**
 * tokens.css — Vivian's locked brand tokens for ID-Verify capture-web.
 * Source: CLAUDE.md brand directive + hub-fe design-token sweep.
 * Do NOT add colours here that aren't in the approved palette.
 * Author: Frankie (frontend-coder)
 */
:root {
  /* ── PRIMARY ACTION ─────────────────────────────────────────────────────
     Gold is RESERVED for the ONE primary CTA per screen only.
     Never use on capture chrome, live states, or ambient status.        */
  --color-cta:        #C99400;
  --color-cta-hover:  #b58500;
  --color-cta-focus:  #C99400;

  /* ── SUCCESS / CONFIRM ──────────────────────────────────────────────── */
  --color-success:    #16A34A;
  --color-success-bg: rgba(22, 163, 74, 0.12);

  /* ── PROGRESS / ATTENTION ───────────────────────────────────────────────
     Must read MORE yellow-orange than brand gold. If it looks like gold → send-back. */
  --color-amber:      #D9A106;
  --color-amber-bg:   rgba(217, 161, 6, 0.14);

  /* ── TRANSIENT ERROR ────────────────────────────────────────────────────
     Soft muted red ≤60% opacity. NEVER a resting state, never a flood.  */
  --color-error:      rgba(220, 106, 106, 0.55);
  --color-error-text: #DC6A6A;

  /* ── SURFACES / TEXT ────────────────────────────────────────────────── */
  --color-black:      #000000;
  --color-white:      #FFFFFF;
  --color-gray:       #58595B;
  --color-gray-light: #8a8c8e;
  --color-gray-muted: rgba(88, 89, 91, 0.40);

  /* Dark surface (capture screen background) */
  --surface-dark:     #0b0e14;
  --surface-dark-2:   #131820;
  --surface-dark-3:   #1c2330;

  /* Light surface (intro / review screens) */
  --surface-light:    #F7F8FA;
  --surface-light-2:  #EDEEF2;
  --surface-card:     #FFFFFF;

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────── */
  --font-heading: 'Montserrat', 'Arial Black', sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;

  /* ── RADIUS ─────────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 9999px;

  /* ── MOTION ─────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-screen:  220ms;
  --dur-fast:    140ms;
  --dur-slow:    400ms;

  /* ── TOUCH TARGETS ──────────────────────────────────────────────────── */
  --touch-min:   44px;

  /* ── Z-INDEX STACK ──────────────────────────────────────────────────── */
  --z-shell:     100;
  --z-sheet:     200;
}

/* Reduced-motion: swap transforms for instant opacity everywhere */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-screen: 0ms;
    --dur-fast:   0ms;
    --dur-slow:   0ms;
  }
}