/* ==========================================================================
   Perfunctio – Produktpräsentation
   Design-Tokens, 1:1 abgeleitet aus frontend/src/design-industrial.css,
   damit die Webseite exakt wie das Produkt selbst aussieht ("Industrial").
   Umschaltbar über <html data-theme="light|dark">; Default folgt dem System.
   ========================================================================== */

@font-face {
  font-family: "Archivo Variable";
  src: local("Archivo Variable"), local("Archivo");
}

:root, :root[data-theme="light"] {
  --i-bg: oklch(0.955 0.011 238);
  --i-panel: oklch(0.989 0.004 238);
  --i-panel-2: oklch(0.942 0.013 238);
  --i-sunk: oklch(0.92 0.016 238);
  --i-line: oklch(0.86 0.017 240);
  --i-line-soft: oklch(0.912 0.012 238);
  --i-ink: oklch(0.24 0.032 252);
  --i-muted: oklch(0.49 0.028 250);
  --i-steel: oklch(0.52 0.075 245);
  --i-steel-soft: oklch(0.77 0.045 240);
  --i-sig: oklch(0.68 0.185 48);
  --i-sig-ink: oklch(0.5 0.16 42);
  --i-on-sig: oklch(0.2 0.02 50);
  --i-bad: oklch(0.54 0.2 27);
  --i-on-bad: #fff;
  --i-ok: oklch(0.55 0.1 158);
  --i-on-ink: oklch(0.98 0 0);
  --i-rel: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(25,40,70,.06), 0 6px 14px -8px rgba(25,40,70,.22);
  --i-rel-btn: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(25,40,70,.14), 0 2px 4px -1px rgba(25,40,70,.16);
  --i-rel-in: inset 0 1px 2px rgba(25,40,70,.14);
  --i-fenster: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(25,40,70,.06),
               0 2px 3px rgba(25,40,70,.08), 0 14px 28px -10px rgba(25,40,70,.32),
               0 38px 70px -28px rgba(25,40,70,.42);
  --i-overlay: rgba(20,32,55,.3);
  --i-hover: color-mix(in srgb, var(--i-steel) 7%, transparent);
  --i-row: 11px;
  --i-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --i-sans: "Archivo Variable", "Archivo", system-ui, -apple-system, sans-serif;
  --i-rad: 3px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --i-bg: oklch(0.185 0.014 252);
  --i-panel: oklch(0.225 0.016 252);
  --i-panel-2: oklch(0.257 0.018 252);
  --i-sunk: oklch(0.165 0.013 252);
  --i-line: oklch(0.34 0.02 250);
  --i-line-soft: oklch(0.285 0.017 250);
  --i-ink: oklch(0.94 0.008 240);
  --i-muted: oklch(0.72 0.02 240);
  --i-steel: oklch(0.72 0.075 242);
  --i-steel-soft: oklch(0.45 0.045 245);
  --i-sig: oklch(0.74 0.17 52);
  --i-sig-ink: oklch(0.79 0.15 56);
  --i-on-sig: oklch(0.2 0.02 50);
  --i-bad: oklch(0.69 0.19 27);
  --i-on-bad: oklch(0.17 0.01 27);
  --i-ok: oklch(0.73 0.1 158);
  --i-on-ink: oklch(0.18 0.006 250);
  --i-rel: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.5), 0 8px 18px -10px rgba(0,0,0,.7);
  --i-rel-btn: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.6);
  --i-rel-in: inset 0 1px 3px rgba(0,0,0,.55);
  --i-fenster: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.45),
               0 2px 4px rgba(0,0,0,.45), 0 18px 36px -12px rgba(0,0,0,.75),
               0 44px 80px -30px rgba(0,0,0,.85);
  --i-overlay: rgba(0,0,0,.5);
  --i-hover: color-mix(in srgb, var(--i-steel) 9%, transparent);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --i-bg: oklch(0.185 0.014 252);
    --i-panel: oklch(0.225 0.016 252);
    --i-panel-2: oklch(0.257 0.018 252);
    --i-sunk: oklch(0.165 0.013 252);
    --i-line: oklch(0.34 0.02 250);
    --i-line-soft: oklch(0.285 0.017 250);
    --i-ink: oklch(0.94 0.008 240);
    --i-muted: oklch(0.72 0.02 240);
    --i-steel: oklch(0.72 0.075 242);
    --i-steel-soft: oklch(0.45 0.045 245);
    --i-sig: oklch(0.74 0.17 52);
    --i-sig-ink: oklch(0.79 0.15 56);
    --i-on-sig: oklch(0.2 0.02 50);
    --i-bad: oklch(0.69 0.19 27);
    --i-on-bad: oklch(0.17 0.01 27);
    --i-ok: oklch(0.73 0.1 158);
    --i-on-ink: oklch(0.18 0.006 250);
    --i-rel: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.5), 0 8px 18px -10px rgba(0,0,0,.7);
    --i-rel-btn: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.6);
    --i-rel-in: inset 0 1px 3px rgba(0,0,0,.55);
    --i-fenster: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.45),
                 0 2px 4px rgba(0,0,0,.45), 0 18px 36px -12px rgba(0,0,0,.75),
                 0 44px 80px -30px rgba(0,0,0,.85);
    --i-overlay: rgba(0,0,0,.5);
    --i-hover: color-mix(in srgb, var(--i-steel) 9%, transparent);
    color-scheme: dark;
  }
}