/* ============================================================
   Presspage KI-Deepfake-Krisensimulator — design tokens
   Everything visual traces back to this file.
   ============================================================ */

:root {
  /* ---- Colour ---- */
  --pp-navy:         #122F4A;   /* brand navy */
  --pp-navy-deep:    #0B2038;   /* page base */
  --pp-navy-abyss:   #071626;   /* vignette / top+bottom edges */
  --pp-green:        #3DB28C;   /* brand green — buttons, accents */
  --pp-green-bright: #4ED89F;   /* glow, correct-state, numerals */
  --pp-green-deep:   #2A8A6B;   /* gradient bottom on buttons */
  --pp-purple:       #B7588F;   /* third colour, sparing use only */
  --pp-red:          #E4483F;   /* error states + red sticker/stamp art */
  --pp-amber:        #E8B34A;   /* partial credit only */

  --text:            #FFFFFF;
  --text-body:       rgba(255, 255, 255, 0.90);
  --text-muted:      rgba(255, 255, 255, 0.58);

  /* ---- Page background ---- */
  /* The hero GIF's own background, sampled from its top edge. The band above
     the image is painted in this so the two meet without a visible seam. */
  --hero-navy: #0d2c48;

  --page-bg: radial-gradient(120% 90% at 50% 0%, #0E2841 0%, #0B2038 45%, #071626 100%);

  /* ---- Liquid glass ---- */
  --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  --glass-border: 1px solid rgba(255, 255, 255, 0.14);
  --glass-blur: blur(22px) saturate(140%);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px rgba(0, 0, 0, 0.45);

  --glass-border-green: rgba(78, 216, 159, 0.45);
  --glass-shadow-green:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 0 0 1px rgba(78, 216, 159, 0.22),
    0 0 44px rgba(61, 178, 140, 0.30),
    0 24px 60px rgba(0, 0, 0, 0.45);

  --radius-card: 28px;
  --radius-card-sm: 24px;
  --radius-row: 16px;
  --radius-option: 20px;
  --radius-input: 14px;

  /* ---- Typography ---- */
  --font-head: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(28px, 8vw, 36px);
  --fs-h2: clamp(24px, 6.5vw, 30px);
  --fs-body: 17px;
  --fs-option: 17px;
  --fs-label: 13px;
  --fs-points: 20px;

  /* ---- Layout ---- */
  --pad-page: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Motion ---- */
  --dur-screen: 320ms;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-screen: 140ms;
  }
}