/* ProofSource Design System — shared tokens consumed by redesign/ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&display=swap');

:root {
  /* ── Canvas & structure ─────────────────────────────── */
  --canvas:       #080C12;
  --panel:        #0B0F17;
  --panel2:       #0E1420;
  --card-fill:    rgba(255,255,255,.025);
  --ink:          #0B0F17;
  --nav-bg:       rgba(8,11,17,.78);
  --footer-bg:    rgba(7,10,16,.5);
  --cta-bg-1:     rgba(9,14,26,1);
  --cta-bg-2:     rgba(14,24,40,1);
  --cta-border:   rgba(91,192,235,.14);
  --pipe-done-bg: #0e1622;
  --pipe-gate-border: #2c5a70;
  --pipe-idle-dot: #334155;

  /* ── Text ───────────────────────────────────────────── */
  --text:         #E7ECF3;
  --mut:          #8A97AC;
  --faint:        #5E6B80;

  /* ── Lines ──────────────────────────────────────────── */
  --line:         rgba(255,255,255,.08);
  --line-soft:    rgba(255,255,255,.05);

  /* ── Semantic decision colors ───────────────────────── */

  /* earned / creator payout — green */
  --earned:       #54B488;
  --earned2:      #7ED4AD;
  --earned-fill:  rgba(84,180,136,.12);
  --earned-line:  rgba(84,180,136,.3);
  --glow-earned:  0 0 10px rgba(84,180,136,.55), 0 0 24px rgba(84,180,136,.22);

  /* buy / operator payment — blue */
  --buy:          #5BC0EB;
  --buy-fill:     rgba(91,192,235,.1);
  --buy-line:     rgba(91,192,235,.28);
  --glow-buy:     0 0 10px rgba(91,192,235,.5), 0 0 22px rgba(91,192,235,.2);

  /* skip — amber */
  --skip:         #E0A458;
  --skip-fill:    rgba(224,164,88,.1);
  --glow-skip:    0 0 8px rgba(224,164,88,.4);

  /* block — red */
  --block:        #E06A5E;
  --block-fill:   rgba(224,106,94,.1);
  --glow-block:   0 0 8px rgba(224,106,94,.4);

  /* reuse — teal */
  --reuse:        #3DBFB0;
  --reuse-fill:   rgba(61,191,176,.1);
  --glow-reuse:   0 0 8px rgba(61,191,176,.4);

  /* ── Receipt (paper) ────────────────────────────────── */
  --paper:        #F2EBDD;
  --paper-ink:    #2A2620;
  --paper-mut:    #7A7160;

  /* ── Typography ─────────────────────────────────────── */
  --font-serif:   'Fraunces', Georgia, serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', monospace;

  /* ── Blueprint grid (sacred motif) ──────────────────── */
  --grid-image:   linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  --grid-size:    48px 48px;
  --grid-mask:    radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);

  /* ── Animation ──────────────────────────────────────── */
  --ease:         cubic-bezier(.25,.46,.45,.94);

  /* ── Elevation ──────────────────────────────────────── */
  --shadow:       0 24px 64px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4);
}

/* ── Light theme ──────────────────────────────────────────
   Dark is the default brand look (the base :root above). This is an
   explicit opt-in toggle, not OS-preference-driven — same token names,
   warm off-white ground (extends the existing --paper family rather
   than pure white). Glows are toned way down; tuned for near-black,
   they read as muddy on a light ground. */
:root[data-theme="light"] {
  color-scheme: light;
  --canvas:       #F6F3EC;
  --panel:        #FFFFFF;
  --panel2:       #FBF8F1;
  --card-fill:    rgba(20,20,10,.03);
  --ink:          #F6F3EC;
  --nav-bg:       rgba(246,243,236,.82);
  --footer-bg:    rgba(251,248,241,.6);
  --cta-bg-1:     #FFFFFF;
  --cta-bg-2:     #FBF6EA;
  --cta-border:   rgba(31,126,168,.2);
  --pipe-done-bg: #EDEAE0;
  --pipe-gate-border: #A9CFE0;
  --pipe-idle-dot: #C9C4B4;

  --text:         #221F1A;
  --mut:          #5B584E;
  --faint:        #8B876E;

  --line:         rgba(20,20,10,.12);
  --line-soft:    rgba(20,20,10,.07);

  --earned:       #2F7D5C;
  --earned2:      #1F6146;
  --earned-fill:  rgba(47,125,92,.1);
  --earned-line:  rgba(47,125,92,.3);
  --glow-earned:  0 0 0 rgba(0,0,0,0);

  --buy:          #1F7EA8;
  --buy-fill:     rgba(31,126,168,.08);
  --buy-line:     rgba(31,126,168,.28);
  --glow-buy:     0 0 0 rgba(0,0,0,0);

  --skip:         #A8703A;
  --skip-fill:    rgba(168,112,58,.1);
  --glow-skip:    0 0 0 rgba(0,0,0,0);

  --block:        #B23B30;
  --block-fill:   rgba(178,59,48,.1);
  --glow-block:   0 0 0 rgba(0,0,0,0);

  --reuse:        #227A6E;
  --reuse-fill:   rgba(34,122,110,.1);
  --glow-reuse:   0 0 0 rgba(0,0,0,0);

  --grid-image:   linear-gradient(rgba(20,20,10,.08) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(20,20,10,.08) 1px, transparent 1px);

  --shadow:       0 18px 40px rgba(30,26,16,.1), 0 2px 8px rgba(30,26,16,.06);
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card-fill);
  color: var(--mut);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  font-size: 15px;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--faint); color: var(--text); }

/* ── Keyframes ────────────────────────────────────────── */

@keyframes tickerflow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes tagdot {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

@keyframes receiptPrint {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes flashEarn {
  0%   { transform: scale(1); filter: brightness(1); }
  40%  { transform: scale(1.04); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(.6deg); }
}

@keyframes sweep {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes bp {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

/* Code blocks: a visible scrollbar reads as "scroll for more", not truncated */
.code-scroll::-webkit-scrollbar { height: 7px; }
.code-scroll::-webkit-scrollbar-track { background: transparent; }
.code-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }
.code-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }
.code-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }