/*
 * theme.css — "Midnight Ledger": a dark-first, acid-lime deals page for
 * Pabbly's Black Friday sale. Numbers are loud, surfaces are quiet, the accent
 * only ever appears where something is about to be bought.
 */

:root {
  color-scheme: dark;

  /* ground */
  --canvas: #0a0b10;
  --surface: #12141b;
  --surface-2: #191c25;
  --border: #262a35;
  --border-strong: #3c4250;
  --ink: #f2f3f5;
  --muted: #a3a8b4;

  /* accent — acid lime, the colour of a price tag */
  --accent: #c9f24b;
  --accent-hover: #d8ff5e;
  --accent-ink: #0a0b10;
  --accent-text: #c9f24b;
  --accent-strong: #a9d92b;
  --accent-soft: #1d2310;
  --accent-border: #43561c;

  /* status */
  --success: #3ddc84;
  --success-ink: #06210f;
  --success-soft: #0f2a1a;
  --success-strong: #6ef0aa;
  --warning: #f0a02b;
  --warning-ink: #241503;
  --warning-soft: #2a1d0b;
  --warning-strong: #ffbe5c;
  --danger: #ff7a7a;
  --danger-ink: #2a0909;
  --danger-soft: #2d1113;
  --danger-strong: #ff9d9d;

  /* data */
  --chart-1: #c9f24b;
  --chart-2: #7cc4ff;
  --chart-3: #ff8fb1;
  --chart-4: #b48cff;
  --chart-5: #ffb454;
  --chart-6: #5fe0c0;

  /* type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 700;
  --display-tracking: -0.035em;
  --eyebrow-tracking: 0.16em;

  /* shape */
  --radius-btn: 999px;
  --radius-card: 20px;
  --radius-input: 12px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 20px 50px -28px rgb(0 0 0 / 0.8);
  --shadow-raised: 0 32px 70px -34px rgb(0 0 0 / 0.9);
  --shadow-btn: 0 10px 24px -14px var(--accent);
  --card-pad: 26px;

  /* this page's own tokens */
  --x-on-photo: #ffffff;
  --x-band: #101219;
  --x-band-2: #0e1017;
  --x-lime: #c9f24b;
  --x-lime-soft: #1d2310;
  --x-line: #33401c;
  --gradient-deal: linear-gradient(150deg, #1d2310 0%, #12141b 58%);
  --gradient-deal-lime: linear-gradient(120deg, #c9f24b 0%, #a9d92b 100%);
}

html[data-theme="light"] {
  --canvas: #f7f7f4;
  --surface: #ffffff;
  --surface-2: #f0f0ea;
  --border: #e0e0d7;
  --border-strong: #b6b6a9;
  --ink: #101218;
  --muted: #575c6b;

  --accent: #4d7c0f;
  --accent-hover: #3f6a0c;
  --accent-ink: #ffffff;
  --accent-text: #466f0c;
  --accent-strong: #38590a;
  --accent-soft: #eef5dd;
  --accent-border: #c9dda2;

  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e2f1e7;
  --success-strong: #116034;

  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #fbeedb;
  --warning-strong: #94450a;

  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #fae4e4;
  --danger-strong: #991616;

  --chart-1: #4d7c0f;
  --chart-2: #1d6fb8;
  --chart-3: #b03a6b;
  --chart-4: #6b46c1;
  --chart-5: #a15c07;
  --chart-6: #0f7a63;

  --shadow-card: 0 18px 44px -30px rgb(16 18 24 / 0.55);
  --shadow-raised: 0 30px 64px -34px rgb(16 18 24 / 0.6);
  --shadow-btn: 0 10px 24px -14px rgb(77 124 15 / 0.7);
  --x-band: #101219;
  --x-band-2: #14161d;
}
/* app.css — texture, the apps marquee, the ticket edge, the hero glow. */

.grid-paper {
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 0%, rgb(0 0 0 / 0.9), transparent 78%);
  mask-image: radial-gradient(75% 60% at 50% 0%, rgb(0 0 0 / 0.9), transparent 78%);
}

.hero-glow {
  background:
    radial-gradient(52% 46% at 78% 6%, var(--accent-soft), transparent 70%),
    radial-gradient(38% 40% at 12% 0%, var(--surface-2), transparent 72%);
}

.deal-ticket {
  background-image: var(--gradient-deal);
  position: relative;
}

.deal-ticket::before,
.deal-ticket::after {
  content: "";
  position: absolute;
  left: -9px;
  right: -9px;
  height: 0;
  border-top: 2px dashed var(--x-line);
}

.deal-ticket::before { top: 50%; }
.deal-ticket::after { display: none; }

.stamp {
  transform: rotate(-7deg);
  box-shadow: 0 0 0 3px var(--x-lime), 0 0 0 4px var(--x-band);
}

.price-cut {
  position: relative;
  display: inline-block;
}

.price-cut::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: 52%;
  height: 3px;
  background: var(--danger);
  border-radius: 2px;
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, rgb(0 0 0) 8%, rgb(0 0 0) 92%, transparent);
  mask-image: linear-gradient(to right, transparent, rgb(0 0 0) 8%, rgb(0 0 0) 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 2.75rem;
  animation: pabbly-marquee 42s linear infinite;
}

@keyframes pabbly-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.ticker-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.reveal {
  transition: transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 620ms ease;
}

[data-inview].reveal {
  transform: translateY(26px);
  opacity: 0.01;
}

[data-inview].is-in.reveal {
  transform: translateY(0);
  opacity: 1;
}

html.reduced-motion .reveal,
html.reduced-motion .marquee-track {
  transition: none;
  animation: none;
  transform: none;
  opacity: 1;
}