/* CardKeep theme tokens — the "Keep Vault" identity.
 * A cool, secure wallet look: deep keep-teal chrome + a single hot "scan-mint"
 * reserved ONLY for the live barcode. Light + dark pairs, WCAG-AA contrast.
 * Checkout mode forces its own black canvas / white barcode card (see styles.css).
 *
 * New tokens are the source of truth; the --accent*/--border/--danger names are
 * kept as aliases so the shared component CSS keeps resolving. */
:root {
  /* surfaces + ink */
  --bg:        #EDF3F1;
  --surface:   #FFFFFF;
  --surface-2: #E3EDEA;
  --ink:       #0E1A18;
  --ink-2:     #3C4F4B;
  --muted:     #5B6E6A;
  --line:      #D3E0DC;
  --line-2:    #BFD2CC;

  /* brand — deep keep-teal */
  --brand:      #0A6E5C;   /* chrome + primary actions — white text = 5.8:1 */
  --brand-deep: #085849;
  --brand-wash: #D9EDE7;
  --ink-on-brand:#FFFFFF;

  /* scan accents — the two-temperature system */
  --scan:      #07A98C;    /* badge/fill teal */
  --scan-glow: #10C7A4;    /* HOT mint — reserved for the live barcode moment only */

  /* semantic */
  --good: #0A6E5C;
  --warn: #B5731A;
  --bad:  #C23B30;

  /* shape + depth */
  --radius:    16px;
  --radius-sm: 10px;
  --notch:     #EDF3F1;    /* ticket-notch fill = page bg (light) */
  --shadow:    0 1px 2px rgba(14,26,24,.05), 0 10px 30px -14px rgba(14,26,24,.22);
  --maxw:      1080px;

  /* type */
  --font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:   "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- back-compat aliases (shared CSS still names these) --- */
  --accent:     var(--brand);
  --accent-ink: var(--ink-on-brand);
  --accent-deep:var(--brand-deep);
  --accent-soft:var(--brand-wash);
  --border:     var(--line);
  --danger:     var(--bad);

  color-scheme: light;
}

/* Dark — CardKeep's native habitat (checkout lives here). Applied by system
   preference unless the user forced light, and whenever the user forces dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0A1211;
    --surface:   #121D1B;
    --surface-2: #172422;
    --ink:       #EAF2EF;
    --ink-2:     #AFC3BE;
    --muted:     #879A95;
    --line:      #243330;
    --line-2:    #31433F;
    --brand:      #22C7A0;
    --brand-deep: #17A585;
    --brand-wash: #123028;
    --ink-on-brand:#06211A;
    --scan:      #2BD3AD;
    --scan-glow: #4DE8C4;
    --good: #2BD3AD;
    --warn: #E0A64E;
    --bad:  #F0776A;
    --notch: #0A1211;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.65);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:        #0A1211;
  --surface:   #121D1B;
  --surface-2: #172422;
  --ink:       #EAF2EF;
  --ink-2:     #AFC3BE;
  --muted:     #879A95;
  --line:      #243330;
  --line-2:    #31433F;
  --brand:      #22C7A0;
  --brand-deep: #17A585;
  --brand-wash: #123028;
  --ink-on-brand:#06211A;
  --scan:      #2BD3AD;
  --scan-glow: #4DE8C4;
  --good: #2BD3AD;
  --warn: #E0A64E;
  --bad:  #F0776A;
  --notch: #0A1211;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.65);
  color-scheme: dark;
}