/* =====================================================================
   MIAG Engineering GmbH — Design Tokens
   "tomorrow's energy now" / Exzellenz durch Präzision und Vertrauen
   ===================================================================== */

/* ---------- Web fonts ------------------------------------------------ */
/* Primary display / body:    TheSans Office   (the official MIAG brand font —
                                                humanist sans with rounded
                                                geometric character; supplied
                                                by the client as TTF)
   Mono (technical specs):    JetBrains Mono                               */
@font-face {
  font-family: 'TheSans Office';
  src: url('fonts/TheSansOffice7_c.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ================================================================
     COLORS — brand
     Sourced from the official CMYK wordmark file.  The two signature
     colors are "MIAG Blue" (the wordmark + all text) and "MIAG Orange"
     (the dot on the I, accents, the claim "tomorrow's energy now").
     ================================================================ */

  /* Primary — MIAG Blue (the wordmark) */
  --miag-blue-900: #002b4d;
  --miag-blue-800: #003f6e;
  --miag-blue-700: #004d85;
  --miag-blue-600: #0060a0; /* CANONICAL — Pantone 301-ish, from logo */
  --miag-blue-500: #1a77b3;
  --miag-blue-400: #4f99c9;
  --miag-blue-300: #8cbdde;
  --miag-blue-200: #c3dcee;
  --miag-blue-100: #e4eff7;
  --miag-blue-50:  #f2f7fb;

  /* Accent — MIAG Orange (the "dot", the claim, highlights) */
  --miag-orange-900: #8a4a0c;
  --miag-orange-800: #b26015;
  --miag-orange-700: #d47a1f;
  --miag-orange-600: #f09030; /* CANONICAL — from logo dot / claim text */
  --miag-orange-500: #f4a254;
  --miag-orange-400: #f8b978;
  --miag-orange-300: #fbd1a3;
  --miag-orange-200: #fde4c6;
  --miag-orange-100: #fef2e3;
  --miag-orange-50:  #fff8ef;

  /* Neutrals — warm-cool slate, biased very slightly toward blue */
  --slate-950: #0a131c;
  --slate-900: #111d2a;
  --slate-800: #1e2b3b;
  --slate-700: #32435a;
  --slate-600: #4a5d76;
  --slate-500: #6b7d94;
  --slate-400: #94a3b5;
  --slate-300: #becad6;
  --slate-200: #dde4ec;
  --slate-150: #e8edf2;
  --slate-100: #f1f4f8;
  --slate-50:  #f7f9fc;
  --white:     #ffffff;
  --black:     #000000;

  /* ----- Semantic (light surface) ----- */
  --fg-1: var(--slate-900);       /* primary text */
  --fg-2: var(--slate-700);       /* secondary text */
  --fg-3: var(--slate-500);       /* tertiary / captions */
  --fg-on-primary: var(--white);  /* text on MIAG blue */
  --fg-on-accent:  var(--white);  /* text on MIAG orange */
  --fg-link:    var(--miag-blue-600);
  --fg-link-hover: var(--miag-blue-700);

  /* Page background is the warm slate-50 tone (matches the "Im Aufbau"
     section). Cards, inputs, headers explicitly use #fff to pop against it. */
  --bg-page:       var(--slate-50);
  --bg-muted:      var(--slate-100);
  --bg-subtle:     var(--slate-100);
  --bg-card:       var(--white);
  --bg-primary:    var(--miag-blue-600);
  --bg-primary-strong: var(--miag-blue-700);
  --bg-accent:     var(--miag-orange-600);
  --bg-accent-soft: var(--miag-orange-100);
  --bg-info-soft:  var(--miag-blue-50);

  --border-1: var(--slate-200);     /* default hairline */
  --border-2: var(--slate-300);     /* stronger divider */
  --border-focus: var(--miag-blue-600);

  /* ----- State (semantic; borrowed from neutrals so we don't invent) */
  --success:  #2f7a4e;
  --success-bg: #e6f2ec;
  --warning:  #c47a12;
  --warning-bg: var(--miag-orange-100);
  --danger:   #b23a2f;
  --danger-bg: #f7e3e1;

  /* ================================================================
     TYPOGRAPHY
     ================================================================ */
  --font-display: 'TheSans Office', 'TheSans', system-ui, -apple-system,
                  'Segoe UI', sans-serif;
  --font-body:    'TheSans Office', 'TheSans', system-ui, -apple-system,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;

  /* Modular scale — 1.200 minor-third on desktop */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ================================================================
     SPACING — 4px base grid
     ================================================================ */
  --space-0:   0;
  --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;
  --space-32: 128px;

  /* ================================================================
     RADII
     Engineering = precise.  Radii are SMALL and consistent; the brand
     is industrial, not playful.  The ONLY truly round element is the
     logo's orange dot on the I.
     ================================================================ */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;   /* default — buttons, inputs, tags */
  --radius-3: 6px;
  --radius-4: 8px;   /* cards */
  --radius-5: 12px;
  --radius-pill: 9999px;

  /* ================================================================
     ELEVATION — subtle.  Flat layout with crisp 1px lines preferred.
     ================================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10, 19, 28, 0.04),
              0 1px 1px rgba(10, 19, 28, 0.03);
  --shadow-2: 0 2px 4px rgba(10, 19, 28, 0.05),
              0 1px 2px rgba(10, 19, 28, 0.04);
  --shadow-3: 0 8px 20px rgba(0, 96, 160, 0.08),
              0 2px 6px rgba(10, 19, 28, 0.05);
  --shadow-4: 0 20px 44px rgba(0, 96, 160, 0.12),
              0 4px 10px rgba(10, 19, 28, 0.06);
  --shadow-focus: 0 0 0 3px rgba(0, 96, 160, 0.25);

  /* ================================================================
     MOTION
     ================================================================ */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-in-out:cubic-bezier(0.45, 0.05, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ================================================================
     LAYOUT
     ================================================================ */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1400px;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   ===================================================================== */

/* Reset-ish baseline for anything using this sheet ------------------- */
html, body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — display face, MIAG-blue by default --------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--miag-blue-600);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--miag-blue-600);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--miag-blue-700);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--miag-blue-700);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

/* The signature orange "claim" — never used for headings ------------ */
.claim {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  color: var(--miag-orange-600);
  letter-spacing: 0;
  text-transform: lowercase;
}

/* Eyebrow / overline — small caps blue, precedes big blue headlines */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--miag-orange-600);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.caption {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

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

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
code {
  background: var(--slate-100);
  border: 1px solid var(--border-1);
  padding: 1px 6px;
  border-radius: var(--radius-2);
  color: var(--miag-blue-700);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-8) 0;
}

/* Selection uses brand blue ----------------------------------------- */
::selection {
  background: var(--miag-blue-200);
  color: var(--miag-blue-900);
}