/* =========================================
   Artify-Kids Brand Layer 2026
   Cyan-Himmel · Pink-Akzente · Quicksand
   Überschreibt Design-Tokens aus style.css
   (kein einziges !important nötig)
========================================= */

:root {
  --brand-bg:       #20c4f4;
  --brand-bg-deep:  #17a8d4;
  --brand-btn:      #f366ba;
  --brand-btn-deep: #e055a8;
  --brand-ink:      #14324a;
  --brand-paper:    #ffffff;
  --font-brand:     'Quicksand', system-ui, sans-serif;

  /* Design-System-Tokens überschreiben */
  --f-display: var(--font-brand);
  --f-text:    var(--font-brand);

  --ink:   var(--brand-ink);
  --paper: var(--brand-paper);

  /* Pink als Primär-Akzent */
  --coral: var(--brand-btn);
  --grad-coral: linear-gradient(135deg, var(--brand-btn), var(--brand-btn-deep));
  --grad-mint:  linear-gradient(135deg, var(--brand-btn), var(--brand-btn-deep));
  --grad-sun:   linear-gradient(135deg, var(--brand-btn), var(--brand-btn-deep));
  --grad-logo:  linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.82) 100%);

  /* Glass auf Cyan */
  --glass:        rgba(255, 255, 255, 0.22);
  --glass-solid:  rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.25);

  /* Brand-Glows */
  --shadow-glow-coral: 0 4px 20px rgba(243, 102, 186, 0.35);
  --shadow-glow-sky:   0 4px 20px rgba(243, 102, 186, 0.25);
}

/* ===== Hintergrund: Cyan-Himmel mit Tiefe ===== */
body {
  background-color: var(--brand-bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.35) 0%, transparent 42%),
    radial-gradient(circle at 85% 85%, rgba(255,255,255,0.18) 0%, transparent 46%),
    linear-gradient(180deg, #2fd0ff 0%, var(--brand-bg) 45%, var(--brand-bg-deep) 100%);
  background-attachment: fixed;
}

/* ===== Ambient Orbs: weiß auf Cyan ===== */
.doodle { background: rgba(255, 255, 255, 0.10); }

/* ===== Header: Glass über Himmel ===== */
.app-header {
  background: rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.crayon-dot { background: rgba(255, 255, 255, 0.6); }
.crayon-dot:first-child { background: var(--brand-btn); }

/* Logo: weiß auf Cyan */
.logo-name {
  background: var(--grad-logo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-lead  { color: rgba(255, 255, 255, 0.7); }
.logo-emoji { filter: drop-shadow(0 2px 4px rgba(20, 50, 74, 0.2)); }

/* Header-Buttons */
.btn-icon {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-icon:hover {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(20, 50, 74, 0.12);
}

/* ===== Tool-Rail: Glass auf Cyan ===== */
.tool-rail {
  background: rgba(255, 255, 255, 0.12);
  border-right-color: rgba(255, 255, 255, 0.15);
}
.rail-divider { background: rgba(255, 255, 255, 0.25); }

.rail-btn {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.5);
}
.rail-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Aktives Werkzeug: Pink-Gradient */
.btn-tool.active {
  background: var(--grad-coral);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-sm), var(--shadow-glow-coral);
}
.btn-tool.active::before { background: #ffffff; }

.rail-toggle.active {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--brand-btn);
  box-shadow: var(--shadow-sm), 0 0 0 2px rgba(243, 102, 186, 0.3);
}

/* Speichern: Pink-CTA */
.rail-save {
  background: var(--grad-coral);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-sm), var(--shadow-glow-coral);
  color: #ffffff;
}
.rail-save:hover { box-shadow: var(--shadow-md), 0 6px 24px rgba(243, 102, 186, 0.4); }
.rail-save .tool-label { color: #ffffff; }

/* ===== Flyouts: weißes Glass ===== */
.flyout {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(20, 50, 74, 0.06);
}
.flyout-title { color: var(--brand-ink); }

.btn-mirror {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(20, 50, 74, 0.08);
}
.btn-mirror.active {
  background: var(--grad-coral);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-sm), var(--shadow-glow-coral);
}
.btn-mirror.active .tool-label { color: rgba(255,255,255,0.8); }

.flyout-btn {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(20, 50, 74, 0.08);
}
.flyout-btn:hover { background: #ffffff; }

/* ===== Farben & Größen ===== */
.color-swatch { border-color: rgba(20, 50, 74, 0.15); }
.color-swatch.active {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--brand-btn), var(--shadow-md);
}
#color-picker { border-color: rgba(20, 50, 74, 0.12); }
.picker-label { color: var(--brand-ink); }

.size-dot { background: var(--brand-ink); }
.size-dot.active {
  background: var(--grad-coral);
  box-shadow: var(--shadow-glow-coral);
}

/* ===== Deckkraft- & Feinjustage-Regler in Pink ===== */
#overlay-opacity {
  background: linear-gradient(to right,
    var(--brand-btn) 0%,
    var(--brand-btn) var(--fill, 90%),
    rgba(20, 50, 74, 0.12) var(--fill, 90%));
}
#overlay-opacity::-webkit-slider-thumb { border-color: var(--brand-btn); }
#overlay-opacity::-moz-range-thumb     { border-color: var(--brand-btn); }
.tune-label b { color: var(--brand-btn); }
.tune-row input[type="range"]::-webkit-slider-thumb { border-color: var(--brand-btn); }
.tune-row input[type="range"]::-moz-range-thumb     { border-color: var(--brand-btn); }

/* ===== Papier auf Cyan ===== */
.paper {
  box-shadow: 0 8px 32px rgba(20, 50, 74, 0.12),
              0 24px 64px rgba(20, 50, 74, 0.10);
}
.stage-hint { color: rgba(20, 50, 74, 0.3); }

/* ===== Toast: Dunkelblau-Glass ===== */
.toast {
  background: rgba(20, 50, 74, 0.88);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
}

/* ===== Galerie ===== */
.gallery-overlay { background: rgba(20, 50, 74, 0.45); }
.gallery-panel {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(20, 50, 74, 0.06);
}
.gallery-header h2 { color: var(--brand-ink); }
.gallery-header { border-bottom-color: rgba(20, 50, 74, 0.08); }
.gallery-item {
  background: #ffffff;
  border-color: rgba(20, 50, 74, 0.06);
}
.gallery-item-date { color: rgba(20, 50, 74, 0.5); }
.gallery-item-actions button {
  background: rgba(243, 102, 186, 0.1);
  border-color: rgba(243, 102, 186, 0.2);
  color: var(--brand-btn-deep);
}
.gallery-item-actions button.btn-download {
  background: rgba(32, 196, 244, 0.1);
  border-color: rgba(32, 196, 244, 0.2);
  color: var(--brand-bg-deep);
}
.gallery-close {
  background: rgba(243, 102, 186, 0.1);
  border-color: rgba(243, 102, 186, 0.2);
}
.gallery-close:hover { background: rgba(243, 102, 186, 0.2); }
.gallery-empty { color: rgba(20, 50, 74, 0.4); }

/* ===== Fokus & Tooltip ===== */
:focus-visible { outline-color: var(--brand-btn); }
.rail-btn[data-tip]::after {
  background: rgba(20, 50, 74, 0.92);
  color: #ffffff;
}

/* ═══════════════════════════════════════════
   DARK MODE – Nacht-Himmel
═══════════════════════════════════════════ */
[data-theme="dark"] {
  --brand-bg:      #0e3a52;
  --brand-bg-deep: #0a2c3f;
  --brand-ink:     #e8f4fa;
  --brand-paper:   #16303f;

  --ink:   var(--brand-ink);
  --paper: var(--brand-paper);

  --glass:        rgba(22, 48, 63, 0.65);
  --glass-solid:  rgba(22, 48, 63, 0.9);
  --glass-border: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] body {
  background-color: var(--brand-bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.04) 0%, transparent 42%),
    radial-gradient(circle at 85% 85%, rgba(255,255,255,0.03) 0%, transparent 46%),
    linear-gradient(180deg, #145070 0%, var(--brand-bg) 45%, var(--brand-bg-deep) 100%);
}

[data-theme="dark"] .app-header {
  background: rgba(14, 58, 82, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .tool-rail {
  background: rgba(14, 58, 82, 0.4);
  border-right-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .rail-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .rail-btn:hover { background: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .btn-tool.active {
  background: var(--grad-coral);
  border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .flyout {
  background: rgba(22, 48, 63, 0.94);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .btn-mirror {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .flyout-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .logo-name {
  background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.7));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .logo-lead { color: rgba(255, 255, 255, 0.5); }
[data-theme="dark"] .btn-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .paper {
  background: oklch(0.96 0.003 90);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 24px 64px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .toast {
  background: rgba(232, 244, 250, 0.92);
  color: #14324a;
  border-color: rgba(20, 50, 74, 0.1);
}
[data-theme="dark"] .gallery-panel { background: rgba(22, 48, 63, 0.96); }
[data-theme="dark"] .gallery-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .doodle { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .crayon-dot { background: rgba(255, 255, 255, 0.3); }
[data-theme="dark"] .crayon-dot:first-child { background: var(--brand-btn); }

/* ===== Mobile Dock auf Cyan ===== */
@media (max-width: 768px) {
  .tool-rail {
    background: rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.15);
  }
  .flyout { background: rgba(255, 255, 255, 0.96); }
}
[data-theme="dark"] .tool-rail {
  background: rgba(14, 58, 82, 0.6);
  border-top-color: rgba(255, 255, 255, 0.06);
}