/* ============================================================
   build Architektur-Visualisierung — Design Tokens
   Typography + Color foundations
   ============================================================ */

/* ---------- Web fonts ---------- */
@font-face {
  font-family: "General Sans";
  src: url("./fonts/GeneralSans-Variable.ttf") format("truetype-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("./fonts/GeneralSans-VariableItalic.ttf") format("truetype-variations");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("./fonts/BricolageGrotesque-Variable.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     COLOR — Brand foundations
     The brand pairs a warm, paper-like base palette (Grundfarben)
     with two refined accents (Akzentfarben). The bright cyan from
     the logo lives only inside the logo lockup itself.
     ---------------------------------------------------------- */

  /* Grundfarben — base */
  --base-light: #f1f0eb;          /* warm off-white, hero canvases */
  --base-dark:  #434240;          /* graphite brown, near-black */

  /* Akzentfarben — accents */
  --accent-blue:  #1B83B7;        /* build brand blue, primary accent */
  --accent-ochre: #b4965a;        /* warm ochre, secondary accent */

  /* ----------------------------------------------------------
     Neutrals — derived from --base-dark / --base-light
     ---------------------------------------------------------- */
  --neutral-50:  #f7f6f2;
  --neutral-100: #f1f0eb;          /* = base-light */
  --neutral-200: #e6e4dd;
  --neutral-300: #d2d0c8;
  --neutral-400: #a8a6a0;
  --neutral-500: #757470;
  --neutral-600: #5a5955;
  --neutral-700: #434240;          /* = base-dark */
  --neutral-800: #2e2d2c;
  --neutral-900: #1c1b1a;

  /* ----------------------------------------------------------
     Accent scales — soft tints / deep shades for surfaces, hover
     ---------------------------------------------------------- */
  --blue-50:  #e6f1f7;
  --blue-100: #c5e0ed;
  --blue-200: #8cc0db;
  --blue-300: #4ea2c8;
  --blue-400: #1084b8;             /* = accent-blue */
  --blue-500: #0c6c97;
  --blue-600: #095575;
  --blue-700: #073e54;

  --ochre-50:  #f7f2e7;
  --ochre-100: #ede1c4;
  --ochre-200: #dcc594;
  --ochre-300: #c8ad75;
  --ochre-400: #b4965a;            /* = accent-ochre */
  --ochre-500: #927747;
  --ochre-600: #6c5832;
  --ochre-700: #483a20;

  /* ----------------------------------------------------------
     Semantic — foreground / background / borders
     ---------------------------------------------------------- */
  --fg-1: var(--neutral-700);      /* primary text */
  --fg-2: var(--neutral-600);      /* secondary text */
  --fg-3: var(--neutral-500);      /* tertiary, captions */
  --fg-4: var(--neutral-400);      /* disabled, hints */
  --fg-on-dark: var(--neutral-50);
  --fg-on-accent: #ffffff;
  --fg-link: var(--accent-blue);

  --bg-1: var(--base-light);       /* canvas */
  --bg-2: var(--neutral-50);       /* elevated surface */
  --bg-3: #ffffff;                 /* card */
  --bg-inverse: var(--base-dark);
  --bg-tint-blue:  var(--blue-50);
  --bg-tint-ochre: var(--ochre-50);

  --border-1: var(--neutral-200);  /* hairline */
  --border-2: var(--neutral-300);  /* default */
  --border-strong: var(--neutral-700);

  /* Status (derived to keep within brand temperature) */
  --status-info:    var(--accent-blue);
  --status-success: #6f8b56;
  --status-warning: var(--accent-ochre);
  --status-danger:  #b4564a;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Type families
     - Display: Bricolage Grotesque (variable; opsz / wdth / wght)
       Used for big architectural headlines, project titles.
     - Text: General Sans — body, UI, captions.
     - Mono: ui-monospace stack for measurements / coordinates.
     ---------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

  /* Type scale — generous, architectural */
  --fs-display-xl: clamp(56px, 9vw, 128px);
  --fs-display-l:  clamp(44px, 6.5vw, 88px);
  --fs-display-m:  clamp(36px, 4.5vw, 64px);
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  /* Fließtext-Skala — entspricht der real auf der Seite genutzten Größe.
     --fs-body ist die einzige Quelle der Wahrheit für regulären Text;
     Komponenten müssen sie nicht mehr per Inline-Style überschreiben. */
  --fs-body-lg: clamp(22px, 1.9vw, 28px);   /* Lead / betonter Absatz */
  --fs-body:    clamp(20px, 1.5vw, 24px);   /* regulärer Fließtext */
  --fs-body-sm: 16px;                        /* kompakter Sekundärtext */
  --fs-caption: 12px;
  --fs-overline: 11px;

  /* Line-heights — display tight, body airy */
  --lh-tight: 1.02;
  --lh-display: 1.06;
  --lh-heading: 1.18;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* Letterspacing */
  --ls-display: -0.02em;
  --ls-heading: -0.012em;
  --ls-body: 0;
  --ls-overline: 0.16em;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ----------------------------------------------------------
     SPACING — 4px base, architectural ratio
     ---------------------------------------------------------- */
  --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;
  --space-10: 128px;
  --space-11: 192px;

  /* ----------------------------------------------------------
     RADII — minimal; architecture favors crisp edges
     ---------------------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 14px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — soft, paper-on-paper
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(28, 27, 26, 0.04), 0 1px 1px rgba(28, 27, 26, 0.03);
  --shadow-2: 0 6px 16px rgba(28, 27, 26, 0.06), 0 2px 4px rgba(28, 27, 26, 0.04);
  --shadow-3: 0 18px 48px rgba(28, 27, 26, 0.10), 0 4px 12px rgba(28, 27, 26, 0.05);
  --shadow-inset: inset 0 0 0 1px rgba(67, 66, 64, 0.08);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   260ms;
  --dur-slow:   520ms;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* ============================================================
   SEMANTIC STYLES — drop-in element defaults
   ============================================================ */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  margin: 0;
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-medium);
  font-variation-settings: "opsz" 96, "wdth" 100;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.display-l {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: var(--fw-medium);
  font-variation-settings: "opsz" 64, "wdth" 100;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.display-m {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-medium);
  font-variation-settings: "opsz" 48, "wdth" 100;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}
.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: 1.5;
}
.overline {
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--blue-500); }

/* ----------------------------------------------------------
   Kontakt-Verschleierung — die Adresse wird per CSS aus geteilten
   data-Attributen zusammengesetzt; im HTML-Quelltext steht KEINE
   zusammenhängende E-Mail/Telefonnummer (Schutz vor Harvester-Bots).
   \0040 = "@".  (Wird beim ersten Hover/Fokus durch echten Text ersetzt.)
   ---------------------------------------------------------- */
.obf-mail::after { content: attr(data-u) "\0040" attr(data-d); }
.obf-tel::after  { content: attr(data-a) " " attr(data-b); }

/* ----------------------------------------------------------
   Dezente In-Text-Verlinkung: Textfarbe (kein Blau), nur feine
   Unterstreichung; beim Hover wird die Unterstreichung kräftiger.
   ---------------------------------------------------------- */
.inline-link {
  color: inherit;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-2);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.inline-link:hover { color: inherit; text-decoration-color: currentColor; }

::selection { background: var(--accent-blue); color: #fff; }

/* focus ring tint derived from #1084b8 */
:root { --focus-ring: 0 0 0 3px rgba(16, 132, 184, 0.22); }