/* ============================================================
   POSTA7 HUISSTIJL — donkere arcade met rood/oranje neon accenten
   ============================================================ */
:root {
  /* Achtergrond — antraciet / zwart als basis */
  --posta-bg:        #0a0a0d;
  --posta-bg-2:      #14141a;
  --posta-bg-3:      #1c1c24;

  /* Accent (primair) — Posta7 oranje/rood */
  --posta-gold:      #ff8a1f;
  --posta-gold-soft: #ffae5c;
  --posta-red:       #e8261d;
  --posta-red-soft:  #ff4a3e;

  /* Felle accent voor actieknoppen */
  --posta-neon:      #ff4a14;
  --posta-neon-soft: #ff7a3a;

  /* Status */
  --posta-green:     #3ddc84;
  --posta-green-2:   #00b754;

  /* Tekst — wit hoofdtekst */
  --posta-text:      #ffffff;
  --posta-text-dim:  #b8b3ad;
  --posta-text-mute: #6e6962;

  /* Cards / lines — gloed-tinten in het oranje */
  --posta-card:      rgba(255, 138, 31, 0.06);
  --posta-card-2:    rgba(255, 138, 31, 0.13);
  --posta-border:    rgba(255, 138, 31, 0.28);
  --posta-border-2:  rgba(255, 138, 31, 0.55);

  --shadow-glow:     0 0 40px rgba(255, 138, 31, 0.45);
  --shadow-glow-red: 0 0 36px rgba(232, 38, 29, 0.5);
  --shadow-card:     0 8px 24px rgba(0, 0, 0, 0.55);

  /* Fonts */
  --font-display: "Bebas Neue", "Impact", "Arial Black", system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--posta-bg);
  color: var(--posta-text);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  background:
    radial-gradient(ellipse at top, var(--posta-bg-3) 0%, var(--posta-bg) 60%),
    var(--posta-bg);
  min-height: 100vh;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  margin: 0;
  font-weight: 400;
}

.gold { color: var(--posta-gold); }
.green { color: var(--posta-green); }
.red { color: var(--posta-red); }
.dim { color: var(--posta-text-dim); }

/* ===================== Animations ===================== */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(245, 166, 35, 0.4); }
  50%      { box-shadow: 0 0 60px rgba(245, 166, 35, 0.7); }
}
@keyframes pop-in {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes spin-y {
  from { transform: rotateY(0); }
  to   { transform: rotateY(360deg); }
}
@keyframes flash-green {
  0%   { background: var(--posta-bg); }
  10%  { background: var(--posta-green-2); }
  100% { background: var(--posta-bg); }
}