/* ============================================================
   brand.css — Scafom-rux Design-Tokens (Colors & Type)

   KANONISCH: kommt aus dem Template und ist die EINZIGE Token-Quelle
   (Farben, Typo, Spacing, Radien, Layout, Breakpoints, Status-Ampel;
   Light + Dark). Nicht von Hand editieren, nicht abtippen, keine
   Farbwerte im Code hardcoden — immer var(--…) nutzen.

   Source of truth: Corporate Design Tool Box (INT_CD_Manual_20251117)
   Snapshot aus Claude-Design-Projekt 019dfc70-6ccd-7f17-96d9-e24ed8a9c8c9
   Stand: 2026-07-14 — Aktualisierung ausschließlich über den Skill
   `design-kit-sync` im Vorlagen-Repo claude-templates.

   Rollen + Begründung der Tokens: design-kit/DESIGN.md §3–§5.
   Komponenten-Klassen, die darauf aufbauen: styles/components.css (§6).
   Schriftdateien liegen in public/fonts/ (nur Syncopate — Myriad-Pro-
   Lizenz ungeklärt, Blöcke unten auskommentiert).
   ============================================================ */

/* ---------- WEBFONTS ----------
   Per CD Manual, headlines use Syncopate (CAPITALS only),
   body uses Myriad Pro (Light preferred).                       */

@font-face {
  font-family: 'Syncopate';
  src: url('/fonts/Syncopate-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syncopate';
  src: url('/fonts/Syncopate-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* TODO(Myriad-Pro-Lizenz): Die Myriad-Pro-@font-face-Blöcke bleiben
   auskommentiert, bis die Webfont-Lizenz (Adobe) geklärt ist — die
   OTF-Dateien liegen bewusst NICHT im Repo. Die --ff-body-Stacks unten
   bleiben unverändert und fallen bis dahin auf Arial zurück (offizieller
   CD-Fallback). Nach Lizenzklärung: OTFs nach frontend/public/fonts/
   legen und diese Blöcke aktivieren.

@font-face {
  font-family: "Myriad Pro";
  src: url("/fonts/MyriadPro-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("/fonts/MyriadPro-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("/fonts/MyriadPro-It.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("/fonts/MyriadPro-Semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("/fonts/MyriadPro-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("/fonts/MyriadPro-BoldIt.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro Cond";
  src: url("/fonts/MyriadPro-LightCond.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro Cond";
  src: url("/fonts/MyriadPro-Cond.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Myriad Pro Cond";
  src: url("/fonts/MyriadPro-BoldCond.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

:root {
  /* ============================================================
     CORE PALETTE — three colors only for the logo system
     ============================================================ */
  --sr-blue: #001036; /* PANTONE 289 C / RAL 5011         */
  --sr-blue-grey: #7e90ac; /* PANTONE 5415 C / RAL 5014        */
  --sr-orange: #ff8100; /* PANTONE 021 C / RAL 2007         */
  --sr-green: #a9c938; /* PANTONE 368 C — RENTAL DIVISION */
  --sr-white: #ffffff;
  --sr-black: #000000;

  /* Blue-grey gradient palette (for tables, panels, gradations)   */
  --sr-bg-100: #001036; /*  100 %                            */
  --sr-bg-90: #1a294a; /*   90 %                            */
  --sr-bg-70: #4d5b7c;
  --sr-bg-30dk: #64738a; /*  blue-grey + 30% black            */
  --sr-bg-50: #8e9bb5;
  --sr-bg-30: #a9b1c4;
  --sr-bg-20: #c1c6d5;
  --sr-bg-10: #dadde7;
  --sr-bg-05: #f2f3f8; /*    5 % – page background tint     */

  /* Neutral grey palette (alternate to blue-grey)                  */
  --sr-n-100: #000000;
  --sr-n-90: #3f3f3f;
  --sr-n-70: #777777;
  --sr-n-50: #a5a5a5;
  --sr-n-30: #cccccc;
  --sr-n-20: #dedede;
  --sr-n-10: #ebebeb;

  /* ============================================================
     SEMANTIC TOKENS
     ============================================================ */
  --fg-1: var(--sr-blue); /* primary text on light    */
  --fg-2: #2a3851; /* secondary text on light  */
  --fg-3: var(--sr-bg-30dk); /* meta / captions          */
  --fg-on-dark-1: #ffffff;
  --fg-on-dark-2: #c1c6d5;
  --fg-accent: var(--sr-orange);
  --fg-link: var(--sr-blue);
  --fg-link-hover: var(--sr-orange);

  --bg-1: #ffffff; /* page                     */
  --bg-2: var(--sr-bg-05); /* subdued panel            */
  --bg-3: var(--sr-bg-10); /* card                     */
  --bg-dark: var(--sr-blue);
  --bg-mid-blue: var(--sr-blue-grey);
  --bg-rule: var(--sr-bg-20);

  --accent: var(--sr-orange);
  --accent-rental: var(--sr-green);

  /* Borders & rules */
  --rule-1: var(--sr-bg-20);
  --rule-2: var(--sr-bg-30);
  --rule-strong: var(--sr-blue);
  --rule-accent: var(--sr-orange);

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --ff-display: 'Syncopate', 'Arial Narrow', system-ui, sans-serif; /* @kind font */
  --ff-body: 'Myriad Pro', 'Helvetica Neue', Arial, system-ui, sans-serif; /* @kind font */
  --ff-cond: 'Myriad Pro Cond', 'Arial Narrow', system-ui, sans-serif; /* @kind font */
  --ff-system: Arial, 'Helvetica Neue', system-ui, sans-serif; /* @kind font */

  /* Type scale (in px – use rem in product code if you prefer)     */
  --t-display-xl: 64px;
  --t-display-l: 48px;
  --t-display-m: 36px;
  --t-display-s: 24px;
  --t-eyebrow: 13px; /* ALL CAPS labels (Syncopate)          */
  --t-body-l: 19px;
  --t-body: 16px;
  --t-body-s: 14px;
  --t-meta: 12px;

  /* Line heights */
  --lh-tight: 1.05; /* @kind other */
  --lh-display: 1.1; /* @kind other */
  --lh-body: 1.55; /* @kind other */
  --lh-meta: 1.4; /* @kind other */

  /* Letter-spacing (Syncopate runs naturally wide; keep 0 unless small) */
  --ls-display: 0; /* @kind other */
  --ls-eyebrow: 0.06em; /* @kind other */
  --ls-caps: 0.04em; /* @kind other */

  /* ============================================================
     SPACING / RADII / SHADOW / MOTION
     ============================================================ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Corners — squared by default; small radius rare. The brand is
     industrial / structural, so corners are sharp.                 */
  --r-0: 0; /* @kind radius */
  --r-1: 2px; /* @kind radius */
  --r-2: 4px; /* @kind radius */
  --r-3: 8px; /* @kind radius */
  --r-pill: 999px; /* @kind radius */

  /* Borders */
  --border-1: 1px solid var(--rule-1); /* @kind other */
  --border-2: 1px solid var(--rule-2); /* @kind other */
  --border-strong: 2px solid var(--sr-blue); /* @kind other */
  --border-accent: 2px solid var(--sr-orange); /* @kind other */

  /* Shadows — used sparingly; brand is flat */
  --shadow-1: 0 1px 2px rgba(0, 16, 54, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 16, 54, 0.08);
  --shadow-3: 0 12px 32px rgba(0, 16, 54, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* The brand "arrow" angle — used for accent shapes */
  --arrow-angle: 24deg; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Map raw tokens onto element-level helpers.
   ============================================================ */

.sr-display-xl,
.sr-h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--t-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-transform: uppercase; /* Syncopate is CAPS only */
}

.sr-display-l,
.sr-h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--t-display-l);
  line-height: var(--lh-display);
  color: var(--fg-1);
  text-transform: uppercase;
}

.sr-display-m,
.sr-h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--t-display-m);
  line-height: var(--lh-display);
  color: var(--fg-1);
  text-transform: uppercase;
}

.sr-display-s,
.sr-h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--t-display-s);
  line-height: 1.2;
  color: var(--fg-1);
  text-transform: uppercase;
}

/* The brand uses a 2-line headline pattern: bold black line +
   blue-grey thinner line. Use .sr-headline + .sr-headline__sub  */
.sr-headline {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--t-display-m);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}
.sr-headline__sub {
  font-family: var(--ff-display);
  font-weight: 400;
  color: var(--sr-blue-grey);
  display: block;
}

/* Eyebrow / breadcrumb label (e.g. "COMPANY OVERVIEW") */
.sr-eyebrow {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-1);
}
.sr-eyebrow__weak {
  font-weight: 400;
  color: var(--fg-2);
}

/* Body */
.sr-body,
.sr-p {
  font-family: var(--ff-body);
  font-weight: 300; /* Light is preferred per manual */
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

.sr-body-l {
  font-size: var(--t-body-l);
  line-height: 1.5;
}
.sr-body-s {
  font-size: var(--t-body-s);
}
.sr-meta {
  font-family: var(--ff-body);
  font-size: var(--t-meta);
  color: var(--fg-3);
  line-height: var(--lh-meta);
}

/* The brand claim — premade graphic, but text-form fallback */
.sr-claim {
  font-family: var(--ff-display);
  font-weight: 400; /* "STRONGER." Regular */
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.sr-claim__bold {
  font-weight: 700;
} /* "TOGETHER." Bold */

/* Bullet list — the brochure uses small filled squares, not dots */
.sr-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sr-bullets > li {
  position: relative;
  padding-left: 18px;
  margin: 0 0 6px 0;
  font-family: var(--ff-body);
  font-weight: 300;
}
.sr-bullets > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--sr-blue);
}
.sr-bullets--accent > li::before {
  background: var(--sr-orange);
}

/* Default page setup (apply to body) */
.sr-app {
  font-family: var(--ff-body);
  font-weight: 300;
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   === Scafom-rux App-Erweiterung ===
   NICHT Teil des CD-Upstreams (Claude-Design-Projekt).
   Beim design-kit-sync wird nur der Teil OBERHALB dieser Marke
   ersetzt — dieser Block bleibt unangetastet.
   ============================================================ */

:root {
  /* Layout-Konstanten (App-Konvention) */
  --topbar-h: 64px;
  --page-max: 1440px;
  --page-pad: 24px;

  /* Breakpoints (decken sich mit Tailwind-Defaults sm/md/lg) */
  --bp-sm: 640px; /* ab hier: kleines Tablet / großes Smartphone quer */
  --bp-md: 768px; /* ab hier: Tablet — volle Topbar-Nav */
  --bp-lg: 1024px; /* ab hier: Desktop */

  /* UI-Radius für Komponenten (Buttons, Cards, Badges, Tabelle …) —
     zentraler Hebel: components.css bezieht den Radius NUR von hier,
     nie pro Komponente ändern. CD-konform SCHARF (--r-0 = 0); einzige
     Ausnahme sind Inputs (--r-1 = 2px, direkt in components.css).
     Pills (--r-pill) sind verboten (DESIGN §10). */
  --radius-ui: var(--r-0); /* 0 — scharf, wie das CD-Manual es vorgibt */

  /* Funktionale Ampel-Statusfarben — App-Funktionalität,
     KEIN Bestandteil des Corporate Designs */
  --status-green-bg: #e8f5e2;
  --status-green-text: #2d6a1f;
  --status-green-border: #8ec97a;
  --status-yellow-bg: #fff8e0;
  --status-yellow-text: #7a5800;
  --status-yellow-border: #e8c84a;
  --status-red-bg: #fde8e8;
  --status-red-text: #9b2020;
  --status-red-border: #f0a0a0;
  --status-neutral-bg: var(--sr-bg-10);
  --status-neutral-text: var(--sr-bg-70);
  --status-info: #0068b4;
}

/* Dark Mode — aus der CD-Tintenskala abgeleitet (das CD selbst kennt
   keinen Dark Mode); Toggle-Pflicht siehe DESIGN.md §3 „Dark Mode" */
[data-theme='dark'] {
  --bg-1: var(--sr-bg-100); /* Seite = Markenblau #001036 */
  --bg-2: #0d1c40; /* Panel — eine Stufe über der Seite */
  --bg-3: var(--sr-bg-90); /* Card #1a294a — Elevation gegenüber Seite */
  --bg-rule: var(--sr-bg-70);

  --fg-1: #ffffff;
  --fg-2: var(--sr-bg-20); /* #c1c6d5 */
  --fg-3: var(--sr-bg-50); /* #8e9bb5 */
  --fg-link: var(--sr-bg-30); /* #a9b1c4 — sr-blue wäre auf Navy unsichtbar */
  --fg-link-hover: var(--sr-orange);

  --rule-1: var(--sr-bg-70); /* Hairline auf Navy */
  --rule-2: var(--sr-bg-30dk);
  --rule-strong: var(--sr-blue-grey);
  --border-strong: 2px solid var(--sr-blue-grey);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* Ampel (funktional) — Overlays + helle Textfarben */
  --status-green-bg: rgba(93, 216, 138, 0.14);
  --status-green-text: #5dd88a;
  --status-green-border: rgba(93, 216, 138, 0.45);
  --status-yellow-bg: rgba(252, 211, 77, 0.14);
  --status-yellow-text: #fcd34d;
  --status-yellow-border: rgba(252, 211, 77, 0.45);
  --status-red-bg: rgba(248, 113, 113, 0.14);
  --status-red-text: #f87171;
  --status-red-border: rgba(248, 113, 113, 0.45);
  /* Overlay statt --sr-bg-90: Karten sind im Dark Mode selbst --sr-bg-90
     (#1a294a), ein neutrales Badge wäre darauf unsichtbar. Als Overlay hebt
     es sich von jeder Fläche ab — analog zu den Ampel-Overlays darüber. */
  --status-neutral-bg: rgba(169, 177, 196, 0.18);
  --status-neutral-text: var(--sr-bg-30);
  --status-info: #5aa9e6;
}