/* ==========================================================================
   TouchTo — Design Tokens
   ========================================================================== */

:root {
  /* ── Primary Colors (AssistUK-Blau) ── */
  --color-primary:        #4b698c;
  --color-primary-light:  #6388ad;
  --color-primary-dark:   #3a5a7c;
  --color-primary-bg:     #eef2f7;

  /* AssistUK Red — sponsor badge / critical actions only */
  --color-secondary:      #ce0f0a;
  --color-secondary-light:#e8302b;
  --color-secondary-dark: #a50c08;

  /* ── Neutral Colors ── */
  --color-bg:             #fafafa;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f5f5f5;
  --color-border:         #e0e0e0;
  --color-border-strong:  #bdbdbd;

  --color-text:           #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted:     #525252;
  --color-text-inverse:   #ffffff;

  /* ── Stufen Colors (7 Kompetenzstufen) ── */
  --color-stufe-1:  #6366f1;
  --color-stufe-2:  #8b5cf6;
  --color-stufe-3:  #06b6d4;
  --color-stufe-4:  #10b981;
  --color-stufe-5:  #f59e0b;
  --color-stufe-6:  #ef4444;
  --color-stufe-7:  #ec4899;

  /* ── Category Colors ── */
  --color-cat-sensorisch:    #3b82f6;
  --color-cat-zielspiele:    #22c55e;
  --color-cat-tracking:      #eab308;
  --color-cat-spiele:        #ef4444;
  --color-cat-kreativ:       #a855f7;
  --color-cat-entspannung:   #78716c;
  --color-cat-teilhabe:      #f97316;

  /* ── Feedback Colors ── */
  --color-success:  #16a34a;
  --color-warning:  #d97706;
  --color-error:    #dc2626;
  --color-info:     #2563eb;

  /* ── Typography ── */
  --font-headline: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'DM Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:    0.875rem;
  --text-sm:    1rem;
  --text-base:  1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;
  --text-4xl:   2.75rem;
  --text-5xl:   3.5rem;

  --font-normal:  400;
  --font-medium:  500;
  --font-bold:    700;
  --font-black:   900;

  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Spacing (8px Grid) ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* ── Radii ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.10);
  --shadow-xl:   0 20px 25px rgba(0,0,0,0.15);
  --shadow-glow: 0 0 20px rgba(75,105,140,0.3);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Responsive Breakpoints ──
     Used in @media queries throughout the app.
     IMPORTANT: CSS variables cannot be used directly in @media queries —
     they exist here only for documentation. Use these literal pixel values
     in @media (min-width: ...) clauses across the codebase.
  --bp-xs:  320px   tiny phones
  --bp-sm:  480px   phones (mobile breakpoint — below this, stack everything)
  --bp-md:  768px   small tablets / large phones landscape (iPad portrait)
  --bp-lg:  1024px  tablets landscape / small laptops (iPad landscape, MacBook 13")
  --bp-xl:  1280px  desktops
  --bp-2xl: 1600px  wide screens
  */
}

/* ==========================================================================
   Theme Overrides
   ========================================================================== */

/* ── Kinderwelt: playful, warm, larger touch targets ── */
:root[data-theme="kinderwelt"],
[data-theme="kinderwelt"] {
  --color-primary:        #c96209;
  --color-primary-light:  #ef8a2a;
  --color-primary-dark:   #a04e06;
  --color-primary-bg:     #fff4e6;

  --color-bg:             #fef9f0;
  --color-surface:        #ffffff;
  --color-surface-alt:    #fdf3e7;
  --color-border:         #f0d9c0;
  --color-border-strong:  #ddb88a;

  --color-text:           #3d2b1f;
  --color-text-secondary: #6b4f3a;
  --color-text-muted:     #8a6d54;

  --font-headline: 'Merriweather', Georgia, serif;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;

  --shadow-md:   0 4px 12px rgba(201, 98, 9, 0.14);
  --shadow-lg:   0 8px 24px rgba(201, 98, 9, 0.18);
  --shadow-glow: 0 0 24px rgba(201, 98, 9, 0.3);
}

/* Kinderwelt: Haupt-CTA (sonst Markenblau) folgt der warmen Akzentfarbe */
:root[data-theme="kinderwelt"] .btn-primary-blue,
[data-theme="kinderwelt"] .btn-primary-blue {
  background: var(--color-primary);
  box-shadow: 0 8px 24px rgba(201, 98, 9, 0.28);
}
:root[data-theme="kinderwelt"] .btn-primary-blue:hover,
[data-theme="kinderwelt"] .btn-primary-blue:hover {
  box-shadow: 0 12px 32px rgba(201, 98, 9, 0.42);
}

:root[data-theme="kinderwelt"] .nav-bar,
[data-theme="kinderwelt"] .nav-bar,
:root[data-theme="kinderwelt"] .btn,
[data-theme="kinderwelt"] .btn {
  font-size: 1.05em;
}

:root[data-theme="kinderwelt"] .activity-card,
[data-theme="kinderwelt"] .activity-card {
  border-radius: 1.25rem;
}

/* ── Erwachsen: clean, professional, muted palette ── */
:root[data-theme="erwachsen"],
[data-theme="erwachsen"] {
  --color-primary:        #5c4a9e;
  --color-primary-light:  #7b6bb5;
  --color-primary-dark:   #453780;
  --color-primary-bg:     #f3f1fa;

  --color-bg:             #f7f7f8;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f0f0f2;
  --color-border:         #d4d4d8;
  --color-border-strong:  #a1a1aa;

  --color-text:           #18181b;
  --color-text-secondary: #3f3f46;
  --color-text-muted:     #71717a;

  --font-headline: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.625rem;

  --shadow-md:   0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg:   0 6px 12px rgba(0,0,0,0.10);
  --shadow-glow: 0 0 16px rgba(92, 74, 158, 0.25);
}

:root[data-theme="erwachsen"] .nav-bar,
[data-theme="erwachsen"] .nav-bar,
:root[data-theme="erwachsen"] .btn,
[data-theme="erwachsen"] .btn {
  font-size: 0.95em;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}