/* ==========================================================================
   MiSolv Design Tokens  ·  v1.0
   Quelle der Wahrheit für Farben, Schrift, Abstände, Radien, Schatten.
   Dark Mode ist Standard. Light Mode über [data-theme="light"] oder
   automatisch per prefers-color-scheme, wenn kein data-theme gesetzt ist.
   ========================================================================== */

:root {
  /* ---- Markenfarben (fix, modusunabhängig) ---- */
  --ms-charcoal:      #17151A;
  --ms-mint:          #9FE0C7;
  --ms-mint-hover:    #8AD6B9;
  --ms-mint-strong:   #2F7D63;   /* Mint für helle Flächen / Druck */
  --ms-maroon:        #C17E82;
  --ms-maroon-strong: #8E4F54;   /* Maroon für helle Flächen / Druck */
  --ms-paper:         #F6F4F1;
  --ms-ivory:         #FBFAF7;
  --ms-white:         #FFFFFF;

  /* ---- Schriften ---- */
  --ms-font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ms-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --ms-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Schriftgrößen (rem bei 16px Basis) ---- */
  --ms-text-display: clamp(2.6rem, 5.5vw, 4.8rem); /* 41–77px, H1 Hero */
  --ms-text-h2:      2.75rem;   /* 44px  Section-Titel */
  --ms-text-h2-cta:  clamp(2rem, 4vw, 3.2rem); /* 32–51px Kontakt/CTA */
  --ms-text-h3:      1.5rem;    /* 24px  Karten-Titel */
  --ms-text-h4:      1.25rem;   /* 20px  Schritt-Titel */
  --ms-text-lead:    1.1875rem; /* 19px  Hero-Lead */
  --ms-text-lg:      1.0625rem; /* 17px */
  --ms-text-body:    1rem;      /* 16px */
  --ms-text-sm:      0.9375rem; /* 15px  Karten-Text, Links */
  --ms-text-xs:      0.875rem;  /* 14px  Labels, Footer, Tags */
  --ms-text-eyebrow: 0.8125rem; /* 13px  Mono-Eyebrow, Badge */
  --ms-text-micro:   0.75rem;   /* 12px  Status-Label, Code-Tab */
  --ms-text-number:  2.5rem;    /* 40px  Mono-Schrittnummer */

  --ms-leading-tight: 1.02;
  --ms-leading-head:  1.1;
  --ms-leading-body:  1.6;
  --ms-leading-code:  1.8;

  --ms-tracking-display: -0.025em; /* ≈ -2px bei 77px */
  --ms-tracking-h2:      -0.023em; /* ≈ -1px bei 44px */
  --ms-tracking-eyebrow: 0.15em;   /* ≈ 2px bei 13px */

  --ms-weight-regular: 400;
  --ms-weight-medium:  500;
  --ms-weight-semi:    600;
  --ms-weight-bold:    700;

  /* ---- Abstände (4er-Raster) ---- */
  --ms-space-1: 4px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 20px;
  --ms-space-6: 24px;
  --ms-space-7: 28px;
  --ms-space-8: 32px;
  --ms-space-9: 36px;
  --ms-space-10: 48px;
  --ms-space-11: 56px;
  --ms-space-12: 96px;
  --ms-space-13: 100px;
  --ms-space-14: 120px;

  /* ---- Layout ---- */
  --ms-container: 1200px;
  --ms-gutter: 24px;
  --ms-section-y: 100px;

  /* ---- Radien ---- */
  --ms-radius-sm: 6px;    /* Status-Label */
  --ms-radius-md: 10px;   /* Eingabefelder, Code-Inline */
  --ms-radius-lg: 12px;   /* Hinweisbox */
  --ms-radius-xl: 20px;   /* Karten, Code-Fenster, Tabellen-Karte */
  --ms-radius-pill: 999px;/* Buttons, Badges, Tags */

  /* ---- Linien ---- */
  --ms-border-w: 1px;
  --ms-border-w-strong: 2px;

  /* ---- Fokus ---- */
  --ms-focus-ring: 0 0 0 3px var(--ms-bg), 0 0 0 5px var(--ms-mint);

  /* ---- Bewegung ---- */
  --ms-ease: cubic-bezier(.2, .7, .2, 1);
  --ms-dur: 160ms;
}

/* ---- Dark Mode (Standard) ---- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --ms-bg:          #17151A;
  --ms-bg-section:  #1D1A21;
  --ms-surface:     #211E25;
  --ms-border:      #2E2A33;
  --ms-line:        #3A363F;
  --ms-ghost:       #55505A;
  --ms-text:        #F3F1EE;
  --ms-text-muted:  #CFCBC6;
  --ms-text-subtle: #A9A4A0;
  --ms-accent:      #9FE0C7;
  --ms-accent-line: #2F7D63;
  --ms-secondary:   #C17E82;
  --ms-inverse-bg:  #F3F1EE;
  --ms-inverse-text:#17151A;
}

/* ---- Light Mode ---- */
[data-theme="light"] {
  color-scheme: light;
  --ms-bg:          #FBFAF7;
  --ms-bg-section:  #F1EEE9;
  --ms-surface:     #FFFFFF;
  --ms-border:      #E2DDD7;
  --ms-line:        #D6D0C9;
  --ms-ghost:       #C9C4BE;
  --ms-text:        #17151A;
  --ms-text-muted:  #3A363F;
  --ms-text-subtle: #55505A;
  --ms-accent:      #2F7D63;
  --ms-accent-line: #9FE0C7;
  --ms-secondary:   #8E4F54;
  --ms-inverse-bg:  #17151A;
  --ms-inverse-text:#F3F1EE;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --ms-bg:          #FBFAF7;
    --ms-bg-section:  #F1EEE9;
    --ms-surface:     #FFFFFF;
    --ms-border:      #E2DDD7;
    --ms-line:        #D6D0C9;
    --ms-ghost:       #C9C4BE;
    --ms-text:        #17151A;
    --ms-text-muted:  #3A363F;
    --ms-text-subtle: #55505A;
    --ms-accent:      #2F7D63;
    --ms-accent-line: #9FE0C7;
    --ms-secondary:   #8E4F54;
    --ms-inverse-bg:  #17151A;
    --ms-inverse-text:#F3F1EE;
  }
}