/* @intertours/design 1.3.1 – Tokens
   Quelle: intertours.de (geprüft 2026-10-14). Werte aus tokens/tokens.json; `npm test` prüft die Übereinstimmung.
   Alle Variablen tragen das Präfix --it-, damit sie bestehende Tool-Variablen nicht überschreiben. */
:root {
  /* Markenfarben (ref) */
  --it-blue: #0a1f2f;
  --it-turquoise: #00c9d9;
  --it-turquoise-hover: #01a8b9;
  --it-grey: #d7d7d5;
  --it-white: #f7f6f2;
  --it-pure-white: #ffffff;
  --it-neutral-dark: #444444;
  --it-neutral: #666666;
  /* Statusmarker (red: manual, green/amber: ref) – nie als Fließtextfarbe auf hell */
  --it-red: #e84046;
  --it-green: #18ad3a;
  --it-amber: #e8ad29;

  /* Typografie (ref) */
  --it-font: Roboto, Arial, sans-serif;
  --it-weight-thin: 100;
  --it-weight-light: 300;
  --it-weight-regular: 400;
  --it-weight-medium: 500;
  --it-weight-bold: 700;
  --it-text-tiny: 0.75rem;
  --it-text-small: 0.875rem;
  --it-text-body: 1rem;
  --it-text-medium: 1.125rem;
  --it-text-large: 1.25rem;
  --it-h1: 3.5rem;
  --it-h2: 2.75rem;
  --it-h3: 2rem;
  --it-h4: 1.5rem;
  --it-h5: 1.25rem;
  --it-h6: 1.25rem;

  /* Form */
  --it-radius-none: 0;
  --it-radius: 0.5rem;
  --it-border-width: 1px;
  --it-shadow-overlay: 0 24px 48px -12px rgba(10, 31, 47, 0.18);
  --it-duration: 0.3s;

  /* Abstände */
  --it-space-1: 0.25rem;
  --it-space-2: 0.5rem;
  --it-space-3: 0.75rem;
  --it-space-4: 1rem;
  --it-space-5: 1.5rem;
  --it-space-6: 2rem;
  --it-space-7: 3rem;
  --it-space-8: 4rem;
  --it-section-small: 3rem;
  --it-section-medium: 5rem;
  --it-section-large: 7rem;
  --it-gutter: 5%;
  /* Seiten-Inset wie intertours.de (.padding-global 5 % + .container-large 77.5rem):
     linke Inhaltskante = max(5 %, (Breite − 77.5rem) / 2) → 1440 px: 100 px, 768 px: 38 px, 390 px: 20 px.
     --it-inset: als padding-inline eines vollbreiten Blocks (Prozent = Breite des Blocks).
     --it-inset-vw: für Blöcke, die nicht die volle Breite haben, aber am linken Fensterrand beginnen. */
  --it-inset: calc(5% + max(0px, (90% - 77.5rem) / 2));
  --it-inset-vw: max(5vw, calc((100vw - 77.5rem) / 2));
  /* Seitenleisten (Arbeitsansichten mit Navigation links): Logo 1.5rem vom Rand */
  --it-inset-sidebar: 1.5rem;

  /* Container */
  --it-container-large: 77.5rem;
  --it-container-medium: 64.375rem;
  --it-container-small: 48rem;

  /* Logo und Kopf */
  --it-logo-site: 3.5rem;
  --it-logo-app: 2rem;
  --it-header-pad: 1.5rem;
  --it-logo-footer: 7.8125rem;

  /* Ebenen */
  --it-z-header: 999;
  --it-z-dialog: 1000;
  --it-z-toast: 1001;

  /* Semantik – Standard: helle Arbeitsfläche */
  --it-bg: var(--it-white);
  --it-surface: var(--it-pure-white);
  --it-fg: var(--it-blue);
  --it-fg-muted: var(--it-neutral-dark);
  --it-fg-subtle: var(--it-neutral);
  --it-border: var(--it-grey);
  --it-border-strong: var(--it-blue);
  --it-accent: var(--it-turquoise);
  --it-accent-hover: var(--it-turquoise-hover);
  --it-on-accent: var(--it-blue);
  --it-tag-bg: rgba(0, 201, 217, 0.1);
  --it-tag-fg: var(--it-blue);
  --it-focus: var(--it-blue);
  --it-link: var(--it-blue);
}

@media (max-width: 991px) {
  :root { --it-h1: 3.25rem; --it-section-medium: 4rem; --it-section-large: 6rem; }
}
@media (max-width: 767px) {
  :root {
    --it-h1: 2.5rem; --it-h2: 2rem; --it-h3: 1.75rem; --it-h6: 1.125rem;
    --it-text-medium: 1rem; --it-text-large: 1.125rem;
    --it-section-small: 2rem; --it-section-medium: 3rem; --it-section-large: 4rem;
    --it-logo-site: 2rem;
  }
}

/* Dunkle Markenfläche (wie intertours.de) */
[data-it-theme="dark"] {
  --it-bg: var(--it-blue);
  --it-surface: rgba(247, 246, 242, 0.05);
  --it-fg: var(--it-white);
  --it-fg-muted: var(--it-grey);
  --it-fg-subtle: rgba(247, 246, 242, 0.6);
  --it-border: rgba(215, 215, 213, 0.2);
  --it-border-strong: var(--it-white);
  --it-tag-bg: rgba(247, 246, 242, 0.05);
  --it-tag-fg: var(--it-turquoise);
  --it-focus: var(--it-turquoise);
  --it-link: var(--it-turquoise);
}
[data-it-theme="light"] {
  --it-bg: var(--it-white);
  --it-surface: var(--it-pure-white);
  --it-fg: var(--it-blue);
  --it-fg-muted: var(--it-neutral-dark);
  --it-fg-subtle: var(--it-neutral);
  --it-border: var(--it-grey);
  --it-border-strong: var(--it-blue);
  --it-tag-bg: rgba(0, 201, 217, 0.1);
  --it-tag-fg: var(--it-blue);
  --it-focus: var(--it-blue);
  --it-link: var(--it-blue);
}