/* files/ms-theme/css/variables.css */
/* Globales Design-System (MSTUDiO) – Farben, Typografie, Layout, Spacing */

/* ========================================================= */
/* 1) LIGHT MODE (DEFAULT)                                   */
/* ========================================================= */

:root {
  /* Primärfarben */
  --ms-primary: oklch(60% 0.15 250);
  --ms-primary-light: oklch(0.70 0.15 260);
  --ms-primary-dark: oklch(0.40 0.15 260);
  --ms-accent: oklch(55% 0.20 25);

  /* Neutrale */
  --ms-white: oklch(100% 0 0);
  --ms-black: oklch(0% 0 0);
  --ms-dark: oklch(25% 0.02 250);
  --ms-text: oklch(20% 0.01 250);

  /* Hintergrundflächen */
  --ms-bg-site: oklch(98% 0.005 250);
  --ms-bg-light-1: oklch(99% 0.01 250);
  --ms-bg-light-2: oklch(98% 0.01 250);
  --ms-bg-light-3: oklch(97% 0.02 250);

  /* Karten & Boxen */
  --ms-card-bg: var(--ms-white);
  --ms-card-accent: oklch(98% 0.005 250);

  /* Rahmen */
  --ms-border-color: oklch(92% 0.01 250);
  --ms-border: 1px solid var(--ms-border-color);

  /* Footer */
  --ms-footer-bg: oklch(20% 0.02 250);
  --ms-footer-text: oklch(90% 0.01 250);
  --ms-footer-border: oklch(30% 0.02 250);

  /* Messages */
  --ms-success-bg: oklch(98% 0.02 140);
  --ms-success-text: oklch(35% 0.10 140);
  --ms-success-border: oklch(85% 0.10 140);

  --ms-error-bg: oklch(98% 0.02 25);
  --ms-error-text: oklch(45% 0.15 25);
  --ms-error-border: oklch(85% 0.10 25);

  /* Overlays */
  --ms-overlay-light: oklch(100% 0 0 / 0.80);
  --ms-overlay-dark: oklch(0% 0 0 / 0.50);
  --ms-overlay-soft: oklch(0% 0 0 / 0.05);
  --ms-overlay-medium: oklch(0% 0 0 / 0.10);
  --ms-overlay-strong: oklch(0% 0 0 / 0.25);

  /* Schatten */
  --ms-shadow-soft: oklch(0% 0 0 / 0.05);
  --ms-shadow-medium: oklch(0% 0 0 / 0.10);
  --ms-shadow-strong: oklch(0% 0 0 / 0.25);

  /* Debug */
  --ms-debug-bg: oklch(97.5% 0.03 25);
  --ms-debug-text: oklch(55% 0.20 25);
  --ms-debug-border: oklch(80% 0.15 25);
}



/* ========================================================= */
/* 2) SYSTEM DARK MODE (wenn User NICHT manuell Light setzt) */
/* ========================================================= */

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --ms-bg-site: oklch(22% 0 0);
    --ms-bg-light-1: oklch(22% 0 0);
    --ms-bg-light-2: oklch(28% 0 0);
    --ms-bg-light-3: oklch(32% 0 0);

    --ms-card-bg: oklch(26% 0 0);
    --ms-card-accent: oklch(30% 0 0);

    --ms-dark: oklch(95% 0 0);
    --ms-text: var(--ms-dark);

    --ms-primary: oklch(70% 0.15 30);

    --ms-border-color: oklch(35% 0 0);
    --ms-border: 1px solid var(--ms-border-color);

    --ms-footer-bg: oklch(15% 0 0);
    --ms-footer-text: oklch(90% 0 0);
    --ms-footer-border: oklch(30% 0 0);

    --ms-overlay-dark: oklch(0% 0 0 / 0.55);
  }
}

/* ========================================================= */
/* 3) USER DARK MODE (Toggle überschreibt ALLES)             */
/* ========================================================= */

body.dark {
  --ms-bg-site: oklch(22% 0 0);
  --ms-bg-light-1: oklch(22% 0 0);
  --ms-bg-light-2: oklch(28% 0 0);
  --ms-bg-light-3: oklch(32% 0 0);

  --ms-card-bg: oklch(26% 0 0);
  --ms-card-accent: oklch(30% 0 0);

  --ms-dark: oklch(95% 0 0);
  --ms-text: var(--ms-dark);

  --ms-primary: oklch(70% 0.15 30);

  --ms-border-color: oklch(35% 0 0);
  --ms-border: 1px solid var(--ms-border-color);

  --ms-footer-bg: oklch(15% 0 0);
  --ms-footer-text: oklch(90% 0 0);
  --ms-footer-border: oklch(30% 0 0);

  --ms-overlay-dark: oklch(0% 0 0 / 0.55);
}

  /* --------------------------------------------- */
  /* 2) TYPOGRAFIE                                 */
  /* --------------------------------------------- */

  :root {
  /* Font Families */
  --ms-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  --ms-font-serif: "Georgia", serif;
  --ms-font-mono: "JetBrains Mono", monospace;

  /* Font Weights */
  --ms-fw-normal: 400;
  --ms-fw-medium: 550;
  --ms-fw-bold: 700;
  --ms-fw-black: 900;

  /* Font Sizes (modular scale) */
  --ms-font-size-xs: 0.75rem;
  --ms-font-size-sm: 0.875rem;
  --ms-font-size-base: 1rem;
  --ms-font-size-lg: 1.25rem;
  --ms-font-size-xl: 1.5rem;
  --ms-font-size-2xl: 2rem;
  --ms-font-size-3xl: 2.5rem;
  --ms-font-size-4xl: 3rem;

  /* Line Heights */
  --ms-line-tight: 1.2;
  --ms-line-normal: 1.6;
  --ms-line-relaxed: 1.8;

  /* --------------------------------------------- */
  /* 3) SPACING SYSTEM (8px Grid)                  */
  /* --------------------------------------------- */

  /* 8px-basierte Skala */
  --ms-space-1: 0.25rem;  /* 4px */
  --ms-space-2: 0.5rem;   /* 8px */
  --ms-space-3: 0.75rem;  /* 12px */
  --ms-space-4: 1rem;     /* 16px */
  --ms-space-5: 1.5rem;   /* 24px */
  --ms-space-6: 2rem;     /* 32px */
  --ms-space-7: 2.5rem;   /* 40px */
  --ms-space-8: 3rem;     /* 48px */
  --ms-space-9: 4rem;     /* 64px */

  /* Layout-Abstände */
  --ms-gap: var(--ms-space-5);
  --ms-section-gap: var(--ms-space-8);
  --ms-sidebar-gap: var(--ms-space-5);

  /* Card Padding */
  --ms-card-padding: var(--ms-space-6);

  /* --------------------------------------------- */
  /* 4) RADII                                      */
  /* --------------------------------------------- */

  --ms-radius-sm: 6px;
  --ms-radius: 12px;
  --ms-radius-lg: 20px;
  --ms-radius-full: 999px;

  /* --------------------------------------------- */
  /* 5) BREAKPOINTS                                */
  /* --------------------------------------------- */

  --ms-breakpoint-sm: 480px;
  --ms-breakpoint-md: 768px;
  --ms-breakpoint-lg: 1024px;
  --ms-breakpoint-xl: 1280px;
  --ms-breakpoint-2xl: 1536px;

  /* --------------------------------------------- */
  /* 6) CONTAINER / LAYOUT                         */
  /* --------------------------------------------- */

  --ms-container-max: 1440px;
  --ms-container-padding: var(--ms-space-4);

  --ms-sidebar-width: clamp(250px, 22vw, 350px);
}