/* Doodle-Core Color Theme — "Pop-Primary" override
 * Loaded on top of the mono CSS when BOOTH_THEME=color.
 * Covers booth, admin, and site in one file via cascade.
 */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&family=Space+Grotesk:wght@700&display=swap');

/* ── Token overrides ────────────────────────────────── */

:root {
  --primary:           #af007f;
  --primary-dark:      #db00a0;
  --secondary-bg:      #fdd400;
  --tertiary-bg:       #008379;
  --teal-light:        #2addcd;
  --pink-light:        #ffaed8;
  --yellow-mid:        #ffe170;
  --surface-container: #fff8f5;
  --muted:             #58404c;
}

/* ── Background — colorful polka dots ───────────────── */

body {
  background-color: #ffffff;
  background-image:
    radial-gradient(circle, #fdd400 18%, transparent 18%),
    radial-gradient(circle, #2addcd 18%, transparent 18%),
    radial-gradient(circle, #ffaed8 18%, transparent 18%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px, 15px 45px;
}

/* ── Typography — Rubik for body text ───────────────── */

body,
p,
.helper-text,
.muted,
.intro,
.lead,
li,
dd {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
}

h1, h2, h3,
.eyebrow,
.kicker,
.section-label,
button,
.cta-primary,
.cta-secondary,
.status-badge,
.camera-overlay,
.printing-indicator,
.payment-mode,
.camera-status,
.brand,
.nav-pill,
.state-label,
.amount-row span,
.amount-row strong {
  font-family: 'Bricolage Grotesque', sans-serif;
}

/* ── Camera — full colour, no greyscale ─────────────── */

#cameraPreview,
#capturePreview {
  filter: saturate(1.2) contrast(1.05);
}

.camera-frame,
.capture-frame {
  clip-path: none;           /* drop the wobbly clip; keep the border */
  border-radius: 12px;
}

.camera-frame::after,
.capture-frame::after {
  border-color: rgba(255, 255, 255, 0.5);
  border-style: solid;
}

/* ── Status badge — sunny yellow ───────────────────── */

.status-badge {
  background: var(--secondary-bg);
  color: #1b1b1b;
  border-color: #1b1b1b;
}

/* ── Booth stage & payment panel ───────────────────── */

.booth-stage {
  background: #ffffff;
  border-color: #1b1b1b;
  border-radius: 16px;
}

.payment-panel {
  background: #ffffff;
  border-color: #1b1b1b;
  border-radius: 16px;
}

/* ── Amount row ─────────────────────────────────────── */

.amount-row {
  border-top-color: #1b1b1b;
  border-bottom-color: #1b1b1b;
}

.amount-row strong {
  color: var(--primary);
}

/* ── Payment QR panel — yellow card ────────────────── */

.payment-qr-panel {
  background: var(--secondary-bg);
  border-color: #1b1b1b;
  border-radius: 12px;
}

.payment-qr-panel img {
  filter: none;
  border-color: #1b1b1b;
}

.payment-qr-panel p {
  color: #1b1b1b;
}

/* ── UPI intent link — teal ─────────────────────────── */

.upi-intent-link {
  background: var(--tertiary-bg);
  color: #ffffff;
  border-color: #1b1b1b;
  border-radius: 999px;
}

/* ── Buttons — electric pink ────────────────────────── */

button {
  background: var(--primary);
  border-color: #1b1b1b;
  border-radius: 8px;
}

button:hover:not(:disabled) {
  background: var(--primary-dark);
  box-shadow: 8px 8px 0 0 #1b1b1b;
}

.capture-button {
  background: var(--primary);
  border-radius: 12px;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}

.capture-button:hover:not(:disabled) {
  background: var(--primary-dark);
}

.ghost-button {
  background: transparent;
  color: #1b1b1b;
  border-color: #1b1b1b;
}

.ghost-button:hover:not(:disabled) {
  background: var(--secondary-bg);
}

/* Paid state — vivid pink pulse */
body.is-paid .capture-button:not(:disabled) {
  animation: colorReadyPulse 1.4s ease-in-out infinite;
}

@keyframes colorReadyPulse {
  0%, 100% { box-shadow: 6px 6px 0 0 #1b1b1b; }
  50%       { box-shadow: 12px 12px 0 0 #1b1b1b, 0 0 24px 6px rgba(175,0,127,0.3); }
}

/* ── Admin panels ───────────────────────────────────── */

.panel {
  background: #ffffff;
  border-color: #1b1b1b;
  border-radius: 12px;
}

.panel-highlight {
  background: var(--secondary-bg);
}

.panel-highlight h2 {
  color: #1b1b1b;
}

.panel-highlight .state-label {
  color: #1b1b1b;
}

.panel-highlight .muted {
  color: #5a4800;
  font-family: 'Rubik', sans-serif;
}

/* ── Admin hardware rows ────────────────────────────── */

.hardware-row {
  border-bottom-color: rgba(27,27,27,0.2);
}

.hardware-row span {
  color: var(--muted);
}

/* ── Countdown — pink ───────────────────────────────── */

.countdown {
  background: var(--primary);
  color: #ffffff;
  border-color: #1b1b1b;
  border-radius: 12px;
}

/* ── Camera/capture frame in admin ──────────────────── */

.camera-status {
  background: var(--secondary-bg);
  color: #1b1b1b;
  border-color: #1b1b1b;
  border-radius: 999px;
}

.camera-overlay {
  background: var(--primary);
  color: #ffffff;
  border-color: #1b1b1b;
  border-radius: 4px;
}

.printing-indicator {
  background: var(--secondary-bg);
  color: #1b1b1b;
  border-color: #1b1b1b;
  border-radius: 4px;
}

.printing-indicator::before {
  background: var(--primary);
}

/* ── Armed / countdown admin state ──────────────────── */

body.is-armed .panel-highlight,
body.is-countdown .panel-highlight {
  background: var(--primary);
  color: #ffffff;
}

body.is-armed .panel-highlight h2,
body.is-countdown .panel-highlight h2 {
  color: rgba(255,255,255,0.7);
}

body.is-armed .panel-highlight .state-label,
body.is-countdown .panel-highlight .state-label {
  color: #ffffff;
}

body.is-armed .panel-highlight .muted,
body.is-countdown .panel-highlight .muted {
  color: rgba(255,255,255,0.75);
  font-family: 'Rubik', sans-serif;
}

/* ── Admin buttons ──────────────────────────────────── */

button.secondary {
  background: var(--secondary-bg);
  color: #1b1b1b;
  border-color: #1b1b1b;
}

.button-link {
  background: var(--primary);
  color: #ffffff;
  border-color: #1b1b1b;
  border-radius: 8px;
}

.button-link:hover {
  background: var(--primary-dark);
}

/* ── Payment QR card in admin ───────────────────────── */

.payment-qr-card {
  background: var(--secondary-bg);
  border-color: #1b1b1b;
  border-radius: 12px;
}

.payment-link {
  background: #fff8f5;
  border-color: #1b1b1b;
  border-radius: 6px;
}

.payment-mode {
  background: var(--secondary-bg);
  color: #1b1b1b;
  border-color: #1b1b1b;
  border-radius: 999px;
}

/* ── Input fields ───────────────────────────────────── */

input {
  border-color: #1b1b1b;
  border-radius: 8px;
}

input:focus {
  box-shadow: 4px 4px 0 0 var(--primary);
}

/* ── Printer output ─────────────────────────────────── */

.printer-output {
  background: #1b1b1b;
  border-color: #1b1b1b;
  border-radius: 8px;
}

/* ── All sections — white frosted background for readability ── */

.content-section,
.soft-band,
.hero-band,
.site-footer {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Retro-pop section — bold yellow with pink accent border ── */

.content-section--retro-pop {
  background: var(--secondary-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 4px solid #1b1b1b;
  border-bottom: 4px solid #1b1b1b;
  box-shadow: 0 6px 0 0 #1b1b1b;
}

/* ── Section label colour ── */

.section-label,
.kicker,
.eyebrow {
  color: var(--primary);
}

/* ── Site header ────────────────────────────────────── */

.site-header {
  background: #ffffff;
  border-bottom-color: #1b1b1b;
  box-shadow: 0 4px 0 0 #1b1b1b;
}

/* ── Site nav ───────────────────────────────────────── */

.nav-pill {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: #1b1b1b !important;
  border-radius: 999px !important;
}

.nav-pill:hover {
  background: var(--primary-dark) !important;
}

/* ── Hero cards & feature cards ─────────────────────── */

.hero-copy {
  background: #ffffff;
  border-color: #1b1b1b;
  border-radius: 16px;
}

.hero-card {
  background: var(--secondary-bg);
  border-color: #1b1b1b;
  border-radius: 16px;
}

.hero-card--image {
  background: transparent;
  border: none;
  box-shadow: none;
}

.hero-card-image {
  border-color: #1b1b1b;
  border-radius: 10px;
  filter: none;
}

.hero-card--image .hero-card-image {
  border: none;
  border-radius: 0;
  background: transparent;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 6px #fff)
    drop-shadow(0 0 12px #fff)
    drop-shadow(0 0 18px #fff)
    drop-shadow(4px 8px 0px rgba(0,0,0,0.28));
}

.feature-card {
  background: #ffffff;
  border-color: #1b1b1b;
  border-radius: 12px;
}

.feature-card:nth-child(1) { background: #ffffff; }
.feature-card:nth-child(2) { background: var(--secondary-bg); }
.feature-card:nth-child(3) { background: #e6fffe; }

.info-card {
  background: #ffffff;
  border-color: #1b1b1b;
  border-radius: 12px;
}

.legal-stack {
  background: #ffffff;
  border-color: #1b1b1b;
  border-radius: 16px;
}

/* ── CTAs — pink primary ────────────────────────────── */

.cta-primary {
  background: var(--primary);
  color: #ffffff;
  border-color: #1b1b1b;
  border-radius: 999px;
  box-shadow: 4px 4px 0 0 #1b1b1b;
}

.cta-primary:hover {
  background: var(--primary-dark);
  box-shadow: 6px 6px 0 0 #1b1b1b;
}

.cta-secondary {
  background: transparent;
  color: #1b1b1b;
  border-color: #1b1b1b;
  border-radius: 999px;
}

.cta-secondary:hover {
  background: var(--secondary-bg);
}

/* ── Mini link cards ────────────────────────────────── */

.mini-link-card {
  background: #ffffff;
  border-color: #1b1b1b;
  border-radius: 10px;
}

.mini-link-card:hover {
  background: var(--secondary-bg);
}

/* ── Footer ─────────────────────────────────────────── */

.footer-row {
  border-top-color: #1b1b1b;
}

/* ── Admin login card ───────────────────────────────── */

.admin-login-card {
  background: #ffffff;
  border-color: #1b1b1b;
  border-radius: 16px;
}

.admin-login-form button {
  background: var(--primary);
  border-color: #1b1b1b;
  border-radius: 999px;
}

.admin-login-form button:hover {
  background: var(--primary-dark);
}

.admin-login-form input {
  border-color: #1b1b1b;
  border-radius: 8px;
}

.admin-login-form input:focus {
  box-shadow: 4px 4px 0 0 var(--primary);
}

.admin-login-error {
  background: #ffd8e9;
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* ── Hero section eyebrow / kicker ─────────────────── */

.eyebrow,
.kicker,
.section-label {
  color: var(--primary);
}