/* Direction: SnapReceipt — bright digital-wallet, electric blue + vivid purple, coral / mint / sunshine accents on white, navy ink */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f2f5ff;
  --surface: #ffffff;
  --surface-2: #e6e9f4;
  --border: #d9e0f7;
  --border-strong: #acafbd;
  --ink: #14204a;
  --muted: #4f5b86;
  --accent: #2f5bff;
  --accent-hover: #284dd9;
  --accent-ink: #ffffff;
  --accent-text: #2447d6;
  --accent-strong: #2b54eb;
  --accent-soft: #e3e9ff;
  --accent-border: #9ab0ff;
  --success: #0b8a68;
  --success-ink: #ffffff;
  --success-soft: #d6e8ed;
  --success-strong: #086c51;
  --warning: #a15c00;
  --warning-ink: #ffffff;
  --warning-soft: #e8e3e0;
  --warning-strong: #945500;
  --danger: #d12449;
  --danger-ink: #ffffff;
  --danger-soft: #eedce9;
  --danger-strong: #c02143;
  --chart-1: #2f5bff;
  --chart-2: #d440da;
  --chart-3: #ae0015;
  --chart-4: #a88003;
  --chart-5: #066c22;
  --chart-6: #079caa;

  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --radius-card: 22px;
  --radius-btn: 14px;
  --radius-input: 14px;
  --shadow-card: 0 12px 30px -16px rgb(47 91 255 / 0.4);
  --x-blue: #2f5bff;
  --x-purple: #7c3aed;
  --x-coral: #ff5c7a;
  --x-mint: #19c79a;
  --x-yellow: #ffc933;
  --x-orange: #ff8a3d;
  --x-teal: #12b5cb;
  --x-pink: #e84fbf;
  --x-lime: #8bd43a;
  --x-navy: #14204a;
  --x-slate: #8794b8;
  --x-gold: #e69a00;
  --x-on-photo: #ffffff;
  --gradient-hero: linear-gradient(120deg, #2f5bff 0%, #7c3aed 100%);
  --gradient-sun: linear-gradient(120deg, #ff5c7a 0%, #ff8a3d 55%, #ffc933 100%);
  --font-sans: "Nunito", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #030610;
  --surface: #1c1f28;
  --surface-2: #10121c;
  --border: #262931;
  --border-strong: #4f5158;
  --ink: #f2f5ff;
  --muted: #92959f;
  --accent: #2f5bff;
  --accent-hover: #4e74ff;
  --accent-ink: #ffffff;
  --accent-text: #5d7fff;
  --accent-strong: #5d7fff;
  --accent-soft: #0d1945;
  --accent-border: #172c7c;
  --success: #0b8a68;
  --success-ink: #ffffff;
  --success-soft: #052323;
  --success-strong: #319c7f;
  --warning: #a15c00;
  --warning-ink: #ffffff;
  --warning-soft: #26190c;
  --warning-strong: #b68038;
  --danger: #d12449;
  --danger-ink: #ffffff;
  --danger-soft: #300d1d;
  --danger-strong: #db5571;
  --chart-1: #2f5bff;
  --chart-2: #d440da;
  --chart-3: #e9242c;
  --chart-4: #a88003;
  --chart-5: #129a35;
  --chart-6: #079caa;
}

.grad-hero { background: var(--gradient-hero); }
.grad-sun { background: var(--gradient-sun); }

.sidenav {
  position: fixed; inset: 0 auto 0 0; width: 17.5rem; z-index: 40;
  transform: translateX(-100%); transition: transform .25s ease;
  overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border);
}
body.nav-open .sidenav { transform: none; }
.nav-backdrop { display: none; }
body.nav-open .nav-backdrop {
  display: block; position: fixed; inset: 0; z-index: 30;
  background: color-mix(in srgb, var(--ink) 50%, transparent);
}
@media (min-width: 1024px) {
  .sidenav { position: sticky; top: 0; height: 100vh; transform: none; flex: none; align-self: flex-start; }
  .nav-backdrop, body.nav-open .nav-backdrop { display: none; }
}
html.reduced-motion .sidenav { transition: none; }

/* receipt-shaped paper with a torn zig-zag edge */
.paper-wrap { filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--ink) 16%, transparent)); }
.paper {
  position: relative; background: var(--surface); color: var(--ink);
  border-radius: 10px 10px 0 0; padding: 0 .9rem .8rem;
  font-family: var(--font-mono); font-size: .68rem; line-height: 1.55;
}
.paper::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
  background: conic-gradient(from 135deg at 50% 0, var(--surface) 90deg, transparent 0) 0 0 / 16px 8px;
}
.paper-top { height: 8px; margin: 0 -.9rem .55rem; border-radius: 10px 10px 0 0; }
.paper-row { display: flex; justify-content: space-between; gap: .5rem; }
.paper-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper-hr { border: 0; border-top: 1.5px dashed var(--border); margin: .45rem 0; }
.paper-lg { font-size: .85rem; padding: 0 1.25rem 1.1rem; }
.paper-lg .paper-top { margin: 0 -1.25rem .8rem; height: 10px; }

.dropzone { transition: border-color .15s, background .15s, transform .15s; }
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone:active { transform: scale(.99); }

.rcard { transition: transform .18s ease, box-shadow .18s ease; }
.rcard:hover { transform: translateY(-3px); }
html.reduced-motion .rcard:hover { transform: none; }

@keyframes floaty { from { transform: translateY(0) rotate(var(--r, 0deg)); } to { transform: translateY(-8px) rotate(var(--r, 0deg)); } }
.floaty { animation: floaty 3.2s ease-in-out infinite alternate; }
html.reduced-motion .floaty { animation: none; }