/* ============================================
   DESIGN TOKENS — bautagebuch.org new frontend
   Single source of truth for all visual values.
   ============================================ */
:root {
  /* Backgrounds */
  --bg: #0B1220;
  --surface-1: #111A2A;
  --surface-2: #162235;
  --surface-3: #1B2A40;

  /* Text */
  --text-strong: #EEF4FB;
  --text-muted: #9FB0C7;
  --text-faint: #6B7F96;

  /* Borders */
  --border-soft: rgba(120,144,178,0.16);
  --border-hover: rgba(120,144,178,0.30);

  /* Accents */
  --accent-warm: #F97316;
  --accent-warm-hover: #E86A10;
  --accent-warm-dark: #E85D04;
  --accent-warm-soft: rgba(249,115,22,0.12);
  --accent-cool: #4F8CFF;
  --accent-cool-soft: rgba(79,140,255,0.12);
  --accent-green: #34D399;
  --accent-green-dark: #10B981;
  --accent-green-soft: rgba(52,211,153,0.12);

  /* Glass / overlay backgrounds */
  --glass-bg: rgba(11,18,32,0.92);
  --glass-bg-strong: rgba(11,18,32,0.95);
  --hover-overlay: rgba(255,255,255,0.04);
  --backdrop-overlay: rgba(11,18,32,0.85);

  /* Focus */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-cool);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px var(--border-soft);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--border-soft);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --topbar-h: 60px;
  --contextbar-h: 48px;
  --mobile-nav-h: 64px;
  --sidebar-w: 250px;
  --content-max-w: 1200px;
  --content-narrow-w: 800px;
  --media-max-w: 1200px;
}

/* ============================================
   DESKTOP SCALE-UP — larger UI on big screens
   ============================================ */
@media (min-width: 1024px) {
  :root {
    --topbar-h: 68px;
    --contextbar-h: 52px;
    --sidebar-w: 272px;
    --content-narrow-w: 860px;
  }
}

/* ============================================
   LIGHT MODE OVERRIDES
   ============================================ */
html[data-theme='light'] {
  /* Backgrounds */
  --bg: #F5F7FA;
  --surface-1: #FFFFFF;
  --surface-2: #EEF1F6;
  --surface-3: #E3E8EF;

  /* Text */
  --text-strong: #0F172A;
  --text-muted: #475569;
  --text-faint: #94A3B8;

  /* Borders */
  --border-soft: rgba(15,23,42,0.10);
  --border-hover: rgba(15,23,42,0.22);

  /* Accents — same hues, slightly adjusted for light bg */
  --accent-warm: #EA6A0E;
  --accent-warm-hover: #D45E0A;
  --accent-warm-dark: #C85000;
  --accent-warm-soft: rgba(234,106,14,0.10);
  --accent-cool: #3B7AE8;
  --accent-cool-soft: rgba(59,122,232,0.10);
  --accent-green: #16A34A;
  --accent-green-dark: #15803D;
  --accent-green-soft: rgba(22,163,74,0.10);

  /* Glass / overlay backgrounds */
  --glass-bg: rgba(255,255,255,0.92);
  --glass-bg-strong: rgba(255,255,255,0.95);
  --hover-overlay: rgba(0,0,0,0.04);
  --backdrop-overlay: rgba(255,255,255,0.85);

  /* Focus */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-cool);

  /* Shadows — lighter for light mode */
  --shadow-card: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px var(--border-soft);
  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.10), 0 0 0 1px var(--border-soft);
}