/*
 * The Industrial Translator, Markenwerte als CSS.
 *
 * ERZEUGT AUS brand/tokens.json. Nicht von Hand ändern.
 * Fällt hier etwas auf, gehört die Ursache in tokens.json oder in
 * build/generators/css.mjs.
 *
 * tokens.json Version 0.1.0, Stand 2026-09-06
 */

:root {
  /* Farbe. Rollen, keine Farbnamen. */
  --it-color-surface-base: #f5f3f0;
  --it-color-surface-raised: #ffffff;
  --it-color-surface-subtle: #eae7e2;
  --it-color-surface-inverse: #12100e;
  --it-color-ink-base: #12100e;
  --it-color-ink-muted: #4f4a44;
  --it-color-ink-subtle: #6b645d;                      /* nicht auf surface.inverse */
  --it-color-ink-on-inverse: #ffffff;
  --it-color-ink-muted-on-inverse: #a5a09a;            /* nicht auf surface.base, surface.raised, surface.subtle */
  --it-color-accent-base: #e0a077;                     /* nicht auf surface.base, surface.raised, surface.subtle */
  --it-color-accent-hover: #eab48f;                    /* nicht auf surface.base, surface.raised, surface.subtle */
  --it-color-accent-on-accent: #12100e;
  --it-color-line-base: #d6d1ca;
  --it-color-line-strong: #12100e;
  --it-color-line-on-inverse: #302c28;
  --it-color-line-focus: #12100e;
  --it-color-line-focus-on-inverse: #ffffff;

  /* Schrift */
  --it-font-ui: "Inter", Helvetica, Arial, sans-serif;
  --it-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --it-weight-regular: 400;
  --it-weight-medium: 500;
  --it-weight-semibold: 600;
  --it-weight-bold: 700;
  --it-weight-extrabold: 800;

  /* Laufweite */
  --it-tracking-display: -0.04em;
  --it-tracking-heading: -0.03em;
  --it-tracking-tight: -0.01em;
  --it-tracking-normal: 0;
  --it-tracking-label: 0.05em;
  --it-tracking-mono-label: 0.1em;

  /* Zeilenhöhe */
  --it-leading-tight: 1.1;
  --it-leading-snug: 1.3;
  --it-leading-normal: 1.5;
  --it-leading-read: 1.65;

  /* Typo-Skala, Verhältnis 1.2 ab 1rem */
  --it-text-2xs: 0.579rem;
  --it-text-xs: 0.694rem;
  --it-text-sm: 0.833rem;
  --it-text-base: 1rem;
  --it-text-read: 1.125rem;
  --it-text-md: 1.2rem;
  --it-text-lg: 1.44rem;
  --it-text-xl: 1.728rem;
  --it-text-2xl: 2.074rem;
  --it-text-3xl: 2.488rem;
  --it-text-display: clamp(2rem, 3vw, 3.5rem);

  /* Feinmaße der Schrift */
  --it-underline-offset: 0.16em;
  --it-underline-thickness: 0.07em;

  /* Zeilenlänge. Der Wert, den ein Auftritt ohne Langtext nicht braucht. */
  --it-measure-read: 68ch;
  --it-measure-narrow: 46ch;
  --it-measure-wide: 86ch;

  /* Abstand */
  --it-space-0: 0;
  --it-space-1: 0.25rem;
  --it-space-2: 0.5rem;
  --it-space-3: 0.75rem;
  --it-space-4: 1rem;
  --it-space-6: 1.5rem;
  --it-space-8: 2rem;
  --it-space-12: 3rem;
  --it-space-16: 4rem;
  --it-space-24: 6rem;
  --it-space-32: 8rem;
  --it-space-absatz: 1.35em;
  --it-space-header-height: 72px;

  /* Form */
  --it-radius-none: 0;                                 /* es gibt keinen zweiten Radiuswert */
  --it-border-hairline: 1px;
  --it-border-strong: 2px;
  --it-border-accent-bar: 3px;
  --it-border-focus-width: 2px;
  --it-border-focus-offset: 2px;
  --it-border-style-solid: solid;
  --it-border-style-dashed: dashed;

  /* Elevation. Harter Versatz, keine weichen Schatten. */
  --it-shadow-none: none;
  --it-shadow-offset-sm: 2px 2px 0 #eae7e2;
  --it-shadow-offset-lg: 6px 6px 0 #eae7e2;

  /* Bewegung */
  --it-duration-fast: 0.15s;
  --it-duration-base: 0.2s;
  --it-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --it-easing-exit: ease-out;

  /* Haltepunkte. In @media selbst nicht verwendbar, CSS erlaubt dort keine
   * Variablen. build/lint-css.mjs prüft stattdessen, dass jede Media Query
   * einen dieser Werte nennt und keinen erfundenen. */
  --it-breakpoint-md: 768px;
  --it-breakpoint-lg: 992px;

  /* Maße des Zeichens */
  --it-zeichen-min-height-k2: 48px;
  --it-zeichen-quadrat: 14;
}

/* Nicht verhandelbar. Siehe tokens.json, motion.reduced. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}