/* =========================================================
   BRADA Gruppe — Colors & Type foundations
   Based on BRADA Design Manual (Stand Juli 2025)
   ========================================================= */

@font-face {
  font-family: "Gantari";
  src: url("./fonts/Gantari-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/Gantari-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gantari";
  src: url("./fonts/Gantari-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/Gantari-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* =========== OFFIZIELLE MARKENFARBEN (Design Manual) =========== */
  /* Kein reines Schwarz — stattdessen Dark Teal als Basisfarbe */
  --brada-dark-teal:  #172323;  /* 92/63/64/80 — Basisfarbe statt Schwarz */
  --brada-teal:       #738a95;  /* 60/30/30/15 — Primärer Markenakzent */
  --brada-light-teal: #a7bbc3;  /* 43/17/21/0  — Sekundärer Akzent */
  --brada-white:      #ffffff;  /* 0/0/0/0     — Pure White */

  /* =========== HERITAGE LAYER (optional) =========== */
  /* Rally-/Vintage-Akzente. Einsatz: Fahrzeugflotte, Bauzaun,
     Recruiting, Event, Jubiläumspublikationen, Swag.
     NICHT verwenden in: Investor-Decks, IR-Seiten, App-UI,
     Verwaltungs-/Vertragsdokumenten. */
  --brada-sand:       #e8dbb8;  /* Warmes Cremefür Stripes, Roundel-Füllung */
  --brada-sand-soft:  #f1e8cf;  /* Hellere Tint */
  --brada-bronze:     #a47e3b;  /* Felgen-Gold, akzentuierende Konturen */
  --brada-bronze-deep:#7a5d2a;

  /* Neutrale Grauskala — aus Dark Teal abgeleitet, kühl */
  --brada-ink-900: #0d1414;
  --brada-ink-800: #172323;
  --brada-ink-700: #1f2e2e;
  --brada-ink-600: #2a3a3b;
  --brada-ink-500: #445254;
  --brada-ink-400: #5a6a6e;
  --brada-ink-300: #738a95;
  --brada-ink-200: #a7bbc3;
  --brada-ink-150: #c7d3d8;
  --brada-ink-100: #e3e9ec;
  --brada-ink-075: #eef2f4;
  --brada-ink-050: #f5f7f8;
  --brada-ink-025: #fafbfc;

  /* Surfaces */
  --surface-page:    var(--brada-white);
  --surface-muted:   var(--brada-ink-050);
  --surface-sunken:  var(--brada-ink-075);
  --surface-inverse: var(--brada-dark-teal);
  --surface-card:    var(--brada-white);
  --surface-overlay: rgba(23,35,35,0.72);

  /* Text */
  --fg-1: var(--brada-dark-teal);   /* Primärtext — KEIN Schwarz */
  --fg-2: var(--brada-ink-500);
  --fg-3: var(--brada-ink-400);
  --fg-muted: var(--brada-ink-300);
  --fg-on-dark-1: var(--brada-white);
  --fg-on-dark-2: var(--brada-light-teal);
  --fg-on-dark-3: rgba(255,255,255,0.60);
  --fg-accent: var(--brada-teal);
  --fg-accent-strong: var(--brada-dark-teal);

  /* Borders */
  --border-subtle:  var(--brada-ink-100);
  --border-default: var(--brada-ink-150);
  --border-strong:  var(--brada-ink-200);
  --border-inverse: rgba(255,255,255,0.14);

  /* Accents */
  --accent:       var(--brada-teal);
  --accent-hover: #5f7680;
  --accent-press: #4f6570;
  --accent-soft:  var(--brada-light-teal);
  --accent-tint:  #dce5e9;

  /* Status — aus der Palette abgeleitet, keine Fremdfarben */
  --status-success: #3f6b5a;
  --status-success-soft: #e1ebe6;
  --status-warning: var(--brada-teal);
  --status-warning-soft: var(--accent-tint);
  --status-danger:  #9a3b3b;
  --status-danger-soft:  #f0dcdc;
  --status-info:    var(--brada-teal);
  --status-info-soft: var(--accent-tint);

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(23,35,35,0.04);
  --shadow-sm: 0 1px 2px rgba(23,35,35,0.05), 0 2px 4px rgba(23,35,35,0.04);
  --shadow-md: 0 2px 4px rgba(23,35,35,0.05), 0 8px 16px rgba(23,35,35,0.06);
  --shadow-lg: 0 8px 16px rgba(23,35,35,0.06), 0 24px 48px rgba(23,35,35,0.08);
  --shadow-xl: 0 24px 48px rgba(23,35,35,0.10), 0 48px 96px rgba(23,35,35,0.10);
  --ring-focus: 0 0 0 3px rgba(115,138,149,0.32);

  /* Radius */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px;
  --radius-lg: 10px; --radius-xl: 16px; --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* =========== TYPOGRAFIE (Design Manual) =========== */
  --font-sans: "Gantari", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Manual-Spec: H1 70pt, H2 60pt, H3 50pt, Body 35pt — Verhältnisse übernommen */
  --fs-h1: clamp(44px, 5.5vw, 70px);   /* Semibold · MAJUSKELN */
  --fs-h2: clamp(36px, 4.6vw, 60px);   /* Semibold · Groß-/Kleinschreibung */
  --fs-h3: clamp(22px, 2.4vw, 32px);   /* Semibold · Zwischenüberschrift */
  --fs-lead: 22px;
  --fs-body: 18px;    /* Light — ca. halb so groß wie H1 */
  --fs-small: 14px;
  --fs-xs: 12px;
  --fs-eyebrow: 12px;

  /* Line heights */
  --lh-heading: 1.08;
  --lh-body: 1.55;
  --lh-tight: 1.25;

  /* Tracking */
  --tr-h1: 0.02em;     /* MAJUSKELN brauchen leicht offenes Tracking */
  --tr-heading: -0.005em;
  --tr-body: 0;
  --tr-eyebrow: 0.14em;

  /* Weights (Manual) */
  --fw-light: 300;     /* Fließtext, Zwischenüberschrift */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;  /* H1, H2 */

  --content-max: 1200px;
  --content-wide: 1360px;
  --content-narrow: 720px;
  --gutter: clamp(16px, 4vw, 48px);
}

/* ===================== Typo utilities ===================== */

.brada-font { font-family: var(--font-sans); }

.brada-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* H1 — Semibold, Majuskeln */
.brada-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-h1);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* H2 — Semibold, Groß-/Kleinschreibung, farbl. abgehoben (Teal) */
.brada-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  color: var(--brada-teal);
}

/* H3 / Zwischenüberschrift — Light, leicht farbl. abgesetzt, etwas größer als Body */
.brada-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  color: var(--brada-teal);
}

.brada-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* Body — Gantari Light */
.brada-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.brada-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.brada-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  color: var(--fg-3);
}
.brada-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-2);
}

.brada-hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-10) 0; }