/* rpmdepot Design-System — Tokens (Tier 1 Primitives + Tier 2 Semantic + Tier 3 Component)
 * ALLE Tokens unter .rpm-ds gescoped — kein :root, kein Leak in andere Seiten.
 * Source of Truth: OneDrive rpmdepot/Technology/System/design-system.md
 * Palette übernommen aus Prototyp „Fokus W201 190E" (etablierte /erfahrungen-Blau-Sprache). */

.rpm-ds {
  /* ---- Tier 1: Primitives ---- */
  /* Neutral-Ramp */
  --rpm-neutral-0:   #ffffff;
  --rpm-neutral-50:  #f7f8f9;
  --rpm-neutral-100: #f4f6f8;
  --rpm-neutral-200: #e2e2e2;
  --rpm-neutral-300: #cfd6de;
  --rpm-neutral-400: #9aa4b0;
  --rpm-neutral-500: #6b7280;
  --rpm-neutral-600: #4b5563;
  --rpm-neutral-700: #374151;
  --rpm-neutral-800: #1f2933;
  --rpm-neutral-900: #111111;
  --rpm-neutral-950: #0e1a29;

  /* Brand / Accent */
  --rpm-brand-500:  #1d9ff0;
  --rpm-brand-600:  #3077d0;
  --rpm-brand-050:  #1d9ff01f;
  --rpm-accent-500: #fbbc04;

  /* Status */
  --rpm-success-500: #1f8f5f;
  --rpm-warning-500: #c77700;
  --rpm-danger-500:  #c8102e;

  /* Spacing (4px-Basis) */
  --rpm-space-0: 0;
  --rpm-space-1: 0.25rem;
  --rpm-space-2: 0.5rem;
  --rpm-space-3: 0.75rem;
  --rpm-space-4: 1rem;
  --rpm-space-5: 1.5rem;
  --rpm-space-6: 2rem;
  --rpm-space-8: 3rem;
  --rpm-space-10: 4rem;
  --rpm-space-12: 6rem;

  /* Type */
  /* Web-safe System-Stack — matcht den Ist-Zustand der Live-Site (rendert überall generisch sans-serif) */
  --rpm-font-sans: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --rpm-text-xs:   0.79rem;
  --rpm-text-sm:   0.889rem;
  --rpm-text-base: 1rem;
  --rpm-text-md:   1.125rem;
  --rpm-text-lg:   clamp(1rem, .9rem + .9vw, 1.16rem);
  --rpm-text-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  --rpm-text-2xl:  clamp(1.6rem, 1.2rem + 1.9vw, 2.3rem);
  --rpm-text-3xl:  clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
  --rpm-leading-tight: 1.15;
  --rpm-leading-normal: 1.55;
  --rpm-leading-loose: 1.7;
  --rpm-weight-normal: 400;
  --rpm-weight-medium: 500;
  --rpm-weight-bold: 700;

  /* Radii / Elevation / Motion */
  --rpm-radius-sm: 4px;
  --rpm-radius-md: 8px;
  --rpm-radius-lg: 16px;
  --rpm-radius-pill: 999px;
  --rpm-shadow-1: 0 1px 2px rgba(11,14,17,.08);
  --rpm-shadow-2: 0 4px 16px rgba(11,14,17,.10);
  --rpm-shadow-3: 0 12px 32px rgba(11,14,17,.14);
  --rpm-ease: cubic-bezier(.2,.6,.2,1);
  --rpm-duration: 180ms;

  /* Layout */
  --rpm-container: 1180px;
  --rpm-container-text: 900px;
  --rpm-gutter: var(--rpm-space-5);

  /* ---- Tier 2: Semantic ---- */
  --rpm-color-bg:            var(--rpm-neutral-0);
  --rpm-color-page:          var(--rpm-neutral-100);
  --rpm-color-surface:       var(--rpm-neutral-50);
  --rpm-color-surface-alt:   var(--rpm-neutral-100);
  --rpm-color-fg:            var(--rpm-neutral-900);
  --rpm-color-fg-body:       var(--rpm-neutral-700);
  --rpm-color-fg-muted:      var(--rpm-neutral-500);
  --rpm-color-border:        var(--rpm-neutral-200);
  --rpm-color-brand:         var(--rpm-brand-500);
  --rpm-color-brand-hover:   var(--rpm-brand-600);
  --rpm-color-on-brand:      var(--rpm-neutral-0);
  --rpm-color-accent:        var(--rpm-accent-500);
  --rpm-color-link:          var(--rpm-brand-600);

  --rpm-color-invert-bg:     var(--rpm-neutral-950);
  --rpm-color-invert-fg:     #f6f9fc;
  --rpm-color-invert-fg-dim: rgba(246,249,252,.76);
  --rpm-color-invert-eyebrow:#7cc6f7;
  --rpm-color-invert-glow:   rgba(29,159,240,.24);

  --rpm-heading-font:   var(--rpm-font-sans);
  --rpm-heading-weight: var(--rpm-weight-bold);
  --rpm-body-font:      var(--rpm-font-sans);
  --rpm-section-pad-y:  var(--rpm-space-10);
  --rpm-block-gap:      var(--rpm-space-5);

  /* ---- Tier 3: Component ---- */
  --rpm-btn-bg:       var(--rpm-color-brand);
  --rpm-btn-bg-hover: var(--rpm-color-brand-hover);
  --rpm-btn-fg:       var(--rpm-color-on-brand);
  --rpm-card-bg:      var(--rpm-color-bg);
  --rpm-card-border:  var(--rpm-color-border);
  --rpm-card-pad:     var(--rpm-space-6);
}