/* ═══════════════════════════════════════════════════════════
   SOCIAL TOOL  ::  THEME: RISOGRAPH
   Limitierte Druckfarben (fluoreszierendes Pink + Türkis),
   körnige Papier-Textur, leichter Druckversatz.
   Wie ein Zine aus der Druckwerkstatt.
═══════════════════════════════════════════════════════════ */

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

[data-theme="risograph"] {
  /* Papierfarbe: cremefarben mit leichtem Stich */
  --bg:           #F4EEDC;
  --card:         #FBF6E8;
  --card2:        #EFE4C8;
  --border:       #1A1A1A;        /* harte schwarze Linien */
  --border-light: #6B6356;

  --text:         #1A1A1A;
  --text-muted:   #6B5E48;
  --text-hint:    #A89878;

  /* Spotfarben: Riso-Pink + Türkis */
  --accent:        #00A99D;   /* Türkis (Teal) */
  --accent-bg:     #B8E8E0;
  --accent-border: #1A1A1A;

  --warn:          #E8B100;   /* Sonnengelb */
  --warn-bg:       #F8E89C;
  --warn-border:   #1A1A1A;

  --danger:        #F0506E;   /* Riso-Fluo-Pink */
  --danger-bg:     #FBC9D2;
  --danger-border: #1A1A1A;

  --purple:        #6E5DBC;   /* Riso Federal Blue / Violett */
  --purple-bg:     #C9C1E8;
  --purple-border: #1A1A1A;

  --neutral-bg:     #EFE4C8;
  --neutral-border: #1A1A1A;

  /* Form: scharf, kantig */
  --radius:    0px;
  --radius-sm: 0px;
  --radius-xs: 0px;
  --btn-radius: 0px;

  /* Schatten: harte Offset-Schatten wie Druckversatz */
  --shadow:      4px 4px 0 #1A1A1A;
  --card-shadow: 3px 3px 0 #1A1A1A;
  --btn-shadow:  4px 4px 0 #1A1A1A;

  /* Schriften */
  --font-body:    'Space Mono', 'Courier New', monospace;
  --font-label:   'Space Mono', monospace;
  --font-display: 'Archivo Black', 'Space Mono', sans-serif;
}

/* ── Riso-spezifische Texturen ─────────────────────────────── */

/* Hintergrund: Papier-Korn */
[data-theme="risograph"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0.55 0'/></filter></defs><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}
[data-theme="risograph"] .app { position: relative; z-index: 1; }

/* Alle Borders dick und schwarz */
[data-theme="risograph"] .card,
[data-theme="risograph"] .row,
[data-theme="risograph"] .two-btn,
[data-theme="risograph"] .sig-tile,
[data-theme="risograph"] .ob-step,
[data-theme="risograph"] .zone-badge,
[data-theme="risograph"] .action-card,
[data-theme="risograph"] .val-box,
[data-theme="risograph"] .info-box,
[data-theme="risograph"] .mm-cell,
[data-theme="risograph"] .theme-toggle,
[data-theme="risograph"] .theme-panel,
[data-theme="risograph"] .add-input,
[data-theme="risograph"] .graph-wrap,
[data-theme="risograph"] .sum-pill,
[data-theme="risograph"] .btn-secondary {
  border: 2px solid #1A1A1A !important;
}

/* Titel: Archivo Black, fett, leicht versetzt für Druckeffekt */
[data-theme="risograph"] .page-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1A1A1A;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 #F0506E,
    -1px 1px 0 #00A99D;
}

[data-theme="risograph"] .eyebrow {
  font-family: var(--font-label);
  color: #F0506E;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

[data-theme="risograph"] .section-label {
  font-family: var(--font-label);
  color: #1A1A1A;
  font-weight: 700;
}

/* Primärbutton: knallig pink mit hartem Offset-Schatten */
[data-theme="risograph"] .btn-primary:not(:disabled) {
  background: #F0506E;
  color: #FBF6E8;
  border: 2px solid #1A1A1A;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 5px 5px 0 #1A1A1A;
  transition: all 0.1s;
}
[data-theme="risograph"] .btn-primary:not(:disabled):active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #1A1A1A;
}
[data-theme="risograph"] .btn-primary:disabled {
  background: #C9C1B0;
  color: #6B5E48;
  box-shadow: 3px 3px 0 #6B5E48;
}

/* Sig-Tiles: ausgewählt = Türkis mit Schwarz-Outline */
[data-theme="risograph"] .sig-tile.sel {
  background: #00A99D;
  color: #FBF6E8;
  border: 2px solid #1A1A1A;
  font-weight: 700;
}
[data-theme="risograph"] .sig-tile.custom {
  background: #F8E89C;
  color: #1A1A1A;
}

/* Two-Btn Selected: harte Farben */
[data-theme="risograph"] .two-btn.sel-green  { background: #00A99D; color: #FBF6E8; }
[data-theme="risograph"] .two-btn.sel-green .t-label { color: #FBF6E8; }
[data-theme="risograph"] .two-btn.sel-red    { background: #F0506E; color: #FBF6E8; }
[data-theme="risograph"] .two-btn.sel-red .t-label   { color: #FBF6E8; }
[data-theme="risograph"] .two-btn.sel-yellow { background: #E8B100; color: #1A1A1A; }
[data-theme="risograph"] .two-btn.sel-yellow .t-label{ color: #1A1A1A; }
[data-theme="risograph"] .two-btn.sel-purple { background: #6E5DBC; color: #FBF6E8; }
[data-theme="risograph"] .two-btn.sel-purple .t-label{ color: #FBF6E8; }

/* Onboarding-Nummern: große, fette Zahlen */
[data-theme="risograph"] .ob-num {
  background: #F0506E;
  color: #FBF6E8;
  border: 2px solid #1A1A1A;
  font-family: var(--font-display);
  font-size: 16px;
}

/* Nav-Dots: schwarze Quadrate */
[data-theme="risograph"] .nav-dot {
  background: #C9C1B0;
  border-radius: 0;
  height: 5px;
}
[data-theme="risograph"] .nav-dot.active { background: #F0506E; }
[data-theme="risograph"] .nav-dot.done   { background: #00A99D; }
[data-theme="risograph"] .nav-label      { color: #1A1A1A; font-weight: 700; }

/* Sum-Pills: rechteckig, dick umrandet */
[data-theme="risograph"] .sum-pill {
  background: #FBF6E8;
  color: #1A1A1A;
  border-radius: 0;
  font-family: var(--font-label);
  font-weight: 700;
}

/* Theme-Toggle */
[data-theme="risograph"] .theme-toggle {
  border-radius: 0;
  background: #F0506E;
  color: #FBF6E8;
}

/* Mini-Matrix-Zellen aktiv: keine Hintergrundfarbe vom Inline-Style, sondern Riso-Stil */
[data-theme="risograph"] .mm-cell.active {
  background: #00A99D !important;
  color: #FBF6E8 !important;
  border-color: #1A1A1A !important;
}