/* ================================================================
   CSS Custom Properties — Light & Dark Mode
   Phase 4 Bereich B
   ================================================================ */

/* ── Light Mode (default) ── */
:root {
  /* Backgrounds */
  --bg-primary:    #FFFFFF;
  --bg-secondary:  #F8FAFC;
  --bg-card:       #FFFFFF;

  /* Text */
  --text-primary:   #1A1A2E;
  --text-secondary: #4A5568;
  --text-muted:     #64748B;  /* darkened for WCAG AA ≥4.5:1 on bg-secondary */

  /* Borders */
  --border:        #E2E8F0;
  --border-subtle: #F0F4F8;

  /* Accent / Interactive */
  --accent:        #3B82F6;
  --accent-subtle: #EFF6FF;

  /* Permit (green) */
  --permit-bg:     #ECFDF5;
  --permit-border: #10B981;

  /* Deny (red) */
  --deny-bg:       #FEF2F2;
  --deny-border:   #EF4444;

  /* Logic chips */
  --chip-or-bg:    #FF9800;
  --chip-or-text:  #ffffff;
  --chip-and-bg:   #2196F3;
  --chip-and-text: #ffffff;

  /* Condition block */
  --condition-bg:     #FFF8E1;
  --condition-border: #FFE082;

  /* Summary box */
  --summary-bg:     #E8F4FD;
  --summary-border: #90CAF9;

  /* Accordion header */
  --acc-hdr-bg:    #F8F9FF;
  --acc-hdr-hover: #EEF0FF;

  /* Sidebar */
  --sidebar-active-bg: #E8EAF6;

  /* Tooltip (intentionally dark in both modes for readability) */
  --tooltip-bg: #263238;

  /* Header (fixed dark, no theme change) */
  --header-bg: #061E29;

  /* Footer */
  --footer-bg:   #1E293B;
  --footer-link: #5EEAD4;

  /* ── Design Tokens ── */

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);

  /* Border radius */
  --radius-sm:   0.25rem;  /* 4px */
  --radius:      0.5rem;   /* 8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-pill: 1.25rem;  /* 20px */

  /* Spacing (8px grid) */
  --sp-1:  0.25rem;  /* 4px  */
  --sp-2:  0.5rem;   /* 8px  */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary:   #0F172A;
  --bg-secondary: #1E293B;
  --bg-card:      #1E293B;

  /* Text */
  --text-primary:   #F1F5F9;
  --text-secondary: #CBD5E0;
  --text-muted:     #94A3B8;

  /* Borders */
  --border:        #334155;
  --border-subtle: #1E293B;

  /* Accent / Interactive */
  --accent:        #60A5FA;
  --accent-subtle: #1E3A5F;

  /* Permit */
  --permit-bg:     #064E3B;
  --permit-border: #34D399;

  /* Deny */
  --deny-bg:       #7F1D1D;
  --deny-border:   #F87171;

  /* Logic chips */
  --chip-or-bg:    #C05621;
  --chip-or-text:  #FEF3C7;
  --chip-and-bg:   #1D4ED8;
  --chip-and-text: #DBEAFE;

  /* Condition block */
  --condition-bg:     #1C1700;
  --condition-border: #92400E;

  /* Summary box */
  --summary-bg:     #0C2340;
  --summary-border: #1E40AF;

  /* Accordion header */
  --acc-hdr-bg:    #243447;
  --acc-hdr-hover: #1a2a3a;

  /* Sidebar */
  --sidebar-active-bg: #1E3A5F;

  /* Tooltip */
  --tooltip-bg: #0F172A;

  /* Header (stays fixed) */
  --header-bg: #061E29;

  /* Footer */
  --footer-bg:   #0F172A;
  --footer-link: #5EEAD4;

  /* Shadows (darker bg → lighter shadows less visible, use same values) */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30);
}

/* ── System preference: auto-dark when no explicit toggle ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:   #0F172A;
    --bg-secondary: #1E293B;
    --bg-card:      #1E293B;

    --text-primary:   #F1F5F9;
    --text-secondary: #CBD5E0;
    --text-muted:     #94A3B8;

    --border:        #334155;
    --border-subtle: #1E293B;

    --accent:        #60A5FA;
    --accent-subtle: #1E3A5F;

    --permit-bg:     #064E3B;
    --permit-border: #34D399;

    --deny-bg:       #7F1D1D;
    --deny-border:   #F87171;

    --chip-or-bg:    #C05621;
    --chip-or-text:  #FEF3C7;
    --chip-and-bg:   #1D4ED8;
    --chip-and-text: #DBEAFE;

    --condition-bg:     #1C1700;
    --condition-border: #92400E;

    --summary-bg:     #0C2340;
    --summary-border: #1E40AF;

    --acc-hdr-bg:    #243447;
    --acc-hdr-hover: #1a2a3a;

    --sidebar-active-bg: #1E3A5F;

    --tooltip-bg: #0F172A;

    --footer-bg:   #0F172A;
    --footer-link: #5EEAD4;

    --shadow-sm:  0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.25);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30);
  }
}