/* ============================================================
   Otten TEC Design System — colors_and_type.css
   Single source of truth for design tokens.
   Import on every preview + UI-kit page.
   ============================================================ */

/* -------- Fonts (lokal gehostet, DSGVO-konform) -------- */
/* Schriften liegen in /fonts/ und werden über @font-face eingebunden.
   Saira Condensed besitzt keine echten Italics – die kursiven Headlines
   entstehen durch vom Browser synthetisierte Schrägstellung aus dem
   aufrechten Schnitt (font-style: italic im CSS). */

/* ===== Saira – Fließtext & UI ===== */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/saira-v23-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/saira-v23-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/saira-v23-latin_latin-ext-600.woff2') format('woff2');
}

/* ===== Saira Condensed – Überschriften (aufrecht; Italic wird synthetisiert) ===== */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/saira-condensed-v12-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/saira-condensed-v12-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/saira-condensed-v12-latin_latin-ext-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/saira-condensed-v12-latin_latin-ext-900.woff2') format('woff2');
}

/* ===== JetBrains Mono – technische Zahlen/Labels ===== */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-v24-latin-600.woff2') format('woff2');
}

:root {
  /* ====== Brand / raw palette ====== */
  /* Carbon-to-paper scale — high-contrast, slightly warm */
  --carbon:       #0B0B0B;   /* near-black, primary dark */
  --asphalt:      #161616;   /* dark surface */
  --steel:        #232323;   /* elevated dark surface */
  --slate:        #3A3A3A;   /* divider on dark, captions on dark */
  --concrete:     #6E6E6E;   /* mid neutral, secondary text on light */
  --smoke:        #B6B5B0;   /* low-contrast neutral */
  --ash:          #DAD8D2;   /* hairline on paper */
  --paper:        #F4F2EE;   /* warm off-white, primary light bg */
  --bone:         #FBFAF7;   /* slightly lighter than paper */
  --pure-white:   #FFFFFF;
  --pure-black:   #000000;

  /* ====== Signal / accent palette ====== */
  /* Drawn from racing-livery vocabulary. Used SPARINGLY. */
  --signal:       #D9381F;   /* brake-light orange — primary accent */
  --signal-deep:  #A82912;   /* hover / pressed state */
  --signal-soft:  #F5DDD3;   /* tinted background (rarely used) */
  --marshal:      #F5C518;   /* kerb yellow — secondary accent, very sparing */
  --marshal-deep: #C99800;

  /* Status colours (kept in the same restrained register) */
  --ok:           #2E7D32;
  --warn:         #F5C518;
  --danger:       #A82912;

  /* ====== Semantic surfaces (light mode default) ====== */
  --bg:           var(--paper);
  --bg-elevated:  var(--bone);
  --bg-sunk:      #EBE9E4;
  --surface-dark: var(--carbon);

  /* ====== Semantic foreground ====== */
  --fg1:          var(--carbon);     /* primary text on light */
  --fg2:          #2B2B2B;           /* secondary text on light */
  --fg3:          var(--concrete);   /* tertiary / captions on light */
  --fg-on-dark1:  var(--paper);      /* primary text on dark */
  --fg-on-dark2:  #C9C7C2;           /* secondary text on dark */
  --fg-on-dark3:  #8A8884;           /* tertiary / captions on dark */

  /* ====== Lines & dividers ====== */
  --line:         var(--ash);                  /* 1px hairline on light */
  --line-strong:  #B5B3AE;                     /* emphasis hairline on light */
  --line-on-dark: rgba(255, 255, 255, 0.12);   /* hairline on dark */
  --line-on-dark-strong: rgba(255, 255, 255, 0.28);

  /* ====== Accents (semantic) ====== */
  --accent:       var(--signal);
  --accent-hover: var(--signal-deep);
  --link:         var(--carbon);
  --link-hover:   var(--signal);

  /* ====== Overlays ====== */
  --scrim-dark:     rgba(11, 11, 11, 0.55);     /* on hero imagery */
  --scrim-darker:   rgba(11, 11, 11, 0.78);
  --scrim-light:    rgba(244, 242, 238, 0.85);
  --header-blur-bg: rgba(11, 11, 11, 0.65);

  /* ====== Typography ====== */
  --font-display: 'Saira Condensed', 'Impact', 'Arial Narrow', sans-serif;
  --font-headline:'Saira Condensed', 'Saira', system-ui, sans-serif;
  --font-body:    'Saira', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — desktop. Headlines lean tall + condensed. */
  --fs-display:    clamp(72px, 9vw, 144px);     /* hero wordmark-scale */
  --fs-h1:         clamp(44px, 5vw, 72px);
  --fs-h2:         clamp(32px, 3.4vw, 48px);
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    12px;   /* track-tight uppercase label */

  --lh-tight:    1.02;
  --lh-headline: 1.08;
  --lh-snug:     1.25;
  --lh-body:     1.6;
  --lh-loose:    1.75;

  --tracking-wordmark: 0.01em;
  --tracking-headline: -0.005em;
  --tracking-eyebrow:  0.18em;
  --tracking-button:   0.04em;

  /* ====== Spacing (4px base) ====== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   40px;
  --space-8:   56px;
  --space-9:   80px;
  --space-10:  96px;
  --space-11: 120px;
  --space-12: 160px;

  /* ====== Radii (intentionally small — motorsport hardware) ====== */
  --radius-0:   0px;
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;     /* used only for full-size media cards */
  --radius-pill: 999px;  /* avoid — chips only */

  /* ====== Borders ====== */
  --border-hairline: 1px solid var(--line);
  --border-strong:   1px solid var(--line-strong);
  --border-accent:   2px solid var(--signal);

  /* ====== Shadows (minimal) ====== */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(11, 11, 11, 0.04), 0 2px 8px rgba(11, 11, 11, 0.06);
  --shadow-2: 0 4px 16px rgba(11, 11, 11, 0.08), 0 12px 40px rgba(11, 11, 11, 0.08);
  --shadow-hero: 0 30px 80px rgba(11, 11, 11, 0.25);

  /* ====== Motion ====== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      400ms;
  --dur-hero:      800ms;

  /* ====== Layout ====== */
  --container-max: 1320px;
  --gutter:        clamp(24px, 5vw, 96px);
  --header-h:      72px;
}

/* ============================================================
   Element-level semantic defaults
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headlines all lean condensed + italic — matches the wordmark family.
   Use .display class for the stencil-italic wordmark register. */
.display,
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  color: var(--fg1);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-headline);
  margin: 0 0 var(--space-4);
  font-weight: 800;
  font-style: italic;
  text-transform: none;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  font-weight: 900;
  font-style: italic;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; }

p {
  margin: 0 0 var(--space-4);
  color: var(--fg2);
  max-width: 68ch;
}

.lead {
  font-size: var(--fs-body-lg);
  color: var(--fg1);
  line-height: 1.55;
}

/* Eyebrow label — track-tight, uppercase, often above a headline */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--signal);
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
  position: relative;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

a.underline-grow {
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
  padding-bottom: 2px;
}
a.underline-grow:hover { background-size: 100% 2px; color: var(--fg1); }

/* Inline mono — telemetry-style data */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Selection */
::selection { background: var(--signal); color: var(--paper); }

/* Utility classes used across previews and UI kits */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.surface-dark { background: var(--carbon); color: var(--fg-on-dark1); }
.surface-dark p { color: var(--fg-on-dark2); }
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4 { color: var(--fg-on-dark1); }
.hairline { border-top: var(--border-hairline); }
.hairline-bottom { border-bottom: var(--border-hairline); }

/* ============================================================
   Buttons — two variants, context-aware via .on-dark wrapper.
   Use .btn (solid) as primary; .btn--ghost (outline) as secondary.
   The solid variant inverts on dark surfaces automatically.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-button);
  padding: 14px 24px;
  border: 1px solid var(--carbon);
  border-radius: var(--radius-sm);
  background: var(--carbon);
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
  text-decoration: none;
}
.btn:hover { background: var(--steel); border-color: var(--steel); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform var(--dur-base) var(--ease-standard); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--carbon);
  border-color: var(--carbon);
}
.btn--ghost:hover { background: var(--carbon); color: var(--paper); }

/* On a dark surface: solid inverts to paper-on-dark; ghost becomes paper outline. */
.surface-dark .btn,
.on-dark .btn {
  background: var(--paper);
  color: var(--carbon);
  border-color: var(--paper);
}
.surface-dark .btn:hover,
.on-dark .btn:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--carbon);
}
.surface-dark .btn--ghost,
.on-dark .btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.surface-dark .btn--ghost:hover,
.on-dark .btn--ghost:hover {
  background: var(--paper);
  color: var(--carbon);
}

/* .btn--text retained — quiet inline CTA */
.btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--carbon);
  padding: 8px 0;
}
.btn--text:hover { color: var(--signal); background: transparent; }
.btn--text .arrow { transition: transform var(--dur-base) var(--ease-standard); }
.btn--text:hover .arrow { transform: translateX(4px); }
.surface-dark .btn--text,
.on-dark .btn--text { color: var(--paper); }
.surface-dark .btn--text:hover,
.on-dark .btn--text:hover { color: var(--signal); }