/* =========================================================
   PDI.Engineering – Base Reset & Design Tokens
   Farbschema: Dunkel (fast Schwarz-Grün) + Gold/Gelb
   Inspiration: Bahnanzeige, Leiterplatten-Lötstoplack
   ========================================================= */

:root {
  /* ── Hintergründe ──────────────────────────────────────── */
  --color-bg:               #0e1a12;   /* sehr dunkles Grün-Schwarz */
  --color-surface:          #131f17;   /* eine Nuance heller */
  --color-surface-2:        #1a2b1e;   /* Karten-Hintergrund */
  --color-surface-offset:   #1f3323;   /* hover-Hintergrund */
  --color-divider:          #243d29;
  --color-border:           #2e5035;

  /* ── Text ──────────────────────────────────────────────── */
  --color-text:             #e8ddb5;   /* warm-goldenes Weiß */
  --color-text-muted:       #9aaa88;   /* gedämpftes Grün-Grau */
  --color-text-faint:       #4a6050;
  --color-text-inverse:     #0e1a12;

  /* ── Gold/Gelb (Primärfarbe) ───────────────────────────── */
  --color-primary:          #f5c800;   /* PDI-Gelb / Goldton */
  --color-primary-hover:    #ffd700;
  --color-primary-active:   #ffea60;
  --color-primary-highlight: rgba(245,200,0,0.10);

  /* ── Lötlack-Grün als Akzent (sekundär) ───────────────── */
  --color-accent:           #3a7d44;   /* satteres PCB-Grün */
  --color-accent-hover:     #4a9e58;
  --color-accent-text:      #e8ddb5;

  /* ── Semantisch ────────────────────────────────────────── */
  --color-success:          #4caf50;
  --color-warning:          #f5c800;
  --color-error:            #e53935;

  /* ── Radius ────────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ── Spacing (4px-Raster) ──────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Typografie-Skala (fluid) ──────────────────────────── */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-hero: clamp(2.5rem,   1rem    + 4vw,    4.5rem);

  /* ── Fonts ─────────────────────────────────────────────── */
  --font-display: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Mono', monospace;

  /* ── Schatten (auf dunklem Hintergrund) ────────────────── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 20px rgba(245,200,0,0.15);

  /* ── Transitions ───────────────────────────────────────── */
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ────────────────────────────────────────────── */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --header-h:        64px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-size-adjust: none;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.15;
  font-family: var(--font-display);
  color: var(--color-primary);
}
p, li, figcaption { text-wrap: pretty; max-width: 72ch; }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

::selection { background: rgba(245,200,0,0.25); color: var(--color-text); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

a, button, [role="button"], input, textarea, select {
  transition: color var(--transition),
              background var(--transition),
              border-color var(--transition),
              box-shadow var(--transition),
              opacity var(--transition);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Helles Theme (optional via Toggle) ──────────────────── */
[data-theme="light"] {
  --color-bg:               #f0ede0;
  --color-surface:          #faf7ee;
  --color-surface-2:        #f0ece0;
  --color-surface-offset:   #e8e3d0;
  --color-divider:          #d8d0b8;
  --color-border:           #c8c0a0;
  --color-text:             #1a1a0e;
  --color-text-muted:       #5a5040;
  --color-text-faint:       #9a9078;
  --color-text-inverse:     #f0ede0;
  --color-primary:          #b08800;
  --color-primary-hover:    #907000;
  --color-primary-active:   #705500;
  --color-primary-highlight: rgba(176,136,0,0.12);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.15);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.20);
  --shadow-glow: 0 0 20px rgba(176,136,0,0.15);
}

/* ── Petrol-Theme ("Nacht") ──────────────────────────────── */
[data-theme="petrol"] {
  --color-bg:               #0d1e26;
  --color-surface:          #112230;
  --color-surface-2:        #162c38;
  --color-surface-offset:   #1c3544;
  --color-divider:          #1e3d4f;
  --color-border:           #265068;
  --color-text:             #cdd5df;
  --color-text-muted:       #7a9aaa;
  --color-text-faint:       #3a5a6a;
  --color-text-inverse:     #0d1e26;
  --color-primary:          #3da8b5;
  --color-primary-hover:    #5bbbc8;
  --color-primary-active:   #7acdd8;
  --color-primary-highlight: rgba(61,168,181,0.12);
  --color-accent:           #2a6a77;
  --color-accent-hover:     #3a8a98;
  --color-accent-text:      #cdd5df;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 20px rgba(61,168,181,0.12);
}

/* ── prefers-color-scheme: Fallback (kein JavaScript nötig) ──
   Falls kein data-theme gesetzt ist, respektieren wir die
   Systemeinstellung des Nutzers automatisch.               */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:               #f0ede0;
    --color-surface:          #faf7ee;
    --color-surface-2:        #f0ece0;
    --color-surface-offset:   #e8e3d0;
    --color-divider:          #d8d0b8;
    --color-border:           #c8c0a0;
    --color-text:             #1a1a0e;
    --color-text-muted:       #5a5040;
    --color-text-faint:       #9a9078;
    --color-text-inverse:     #f0ede0;
    --color-primary:          #b08800;
    --color-primary-hover:    #907000;
    --color-primary-active:   #705500;
    --color-primary-highlight: rgba(176,136,0,0.12);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.20);
    --shadow-glow: 0 0 20px rgba(176,136,0,0.15);
  }
}


html, body {
  overflow-x: clip;
}

main, section, header, footer, div, article, aside, nav {
  min-width: 0;
}