/* REWAY Design Tokens
 * ==============================================
 * Source: CI-Sheet-REWAY-02.pdf + prompt brief.
 * Four brand colors, two typefaces, flat surfaces.
 * Primary language: German (de-DE).
 */

/* ---------- Webfonts ----------
 * Brand specifies AXIS Extra Bold (logo) and Futura Bold (headlines + body).
 *   Futura Bold  → user-supplied (fonts/Futura_Bold.otf)
 *   Futura Book  → NOT SUPPLIED ⚠  — Jost 400/500 used as weight-sibling stand-in
 *   AXIS Extra Bold → NOT SUPPLIED ⚠ — Archivo Black used for mark/wordmark
 */
@font-face {
  font-family: 'Futura';
  src: url('fonts/Futura_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Weight-sibling fallback for non-bold Futura uses (Jost Book/Medium) */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;800&family=Archivo+Black&display=swap');

:root {
  /* ---- Brand palette (from CI sheet) ---- */
  --reway-red:    #F52146;
  --reway-black:  #000000;
  --reway-cream:  #F3EBE0;
  --reway-white:  #FFFFFF;

  /* Derived red states (no new hues — only value shifts) */
  --reway-red-hover:  #D11A3B;   /* press/hover on primary */
  --reway-red-active: #B0122E;   /* active state */
  --reway-red-tint:   #FCE3E8;   /* 10% red wash, for selected rows */

  /* Neutral grays are derived from black (opacity tints) */
  --ink-100: rgba(0,0,0,1);
  --ink-80:  rgba(0,0,0,.80);
  --ink-60:  rgba(0,0,0,.60);
  --ink-40:  rgba(0,0,0,.40);
  --ink-16:  rgba(0,0,0,.16);
  --ink-08:  rgba(0,0,0,.08);
  --ink-04:  rgba(0,0,0,.04);

  /* Cream-ground tints (for dividers on cream) */
  --cream-line: rgba(0,0,0,.12);

  /* ---- Semantic foreground ---- */
  --fg-1: var(--reway-black);     /* primary text */
  --fg-2: var(--ink-60);          /* secondary text */
  --fg-3: var(--ink-40);           /* tertiary / metadata */
  --fg-on-red:   #FFFFFF;
  --fg-on-dark:  #FFFFFF;
  --fg-link:     var(--reway-red);

  /* ---- Semantic backgrounds ---- */
  --bg-app:       var(--reway-white);   /* application canvas */
  --bg-marketing: var(--reway-cream);   /* default marketing ground */
  --bg-elevated:  var(--reway-white);   /* cards on cream */
  --bg-inverse:   var(--reway-black);
  --bg-selected:  var(--reway-red-tint);
  --bg-hover:     var(--ink-04);

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--ink-08);
  --border-strong:   1px solid var(--ink-16);
  --border-cream:    1px solid var(--cream-line);
  --border-focus:    2px solid var(--reway-red);

  /* ---- Status (narrow — brand discourages heavy semantic color) ---- */
  --status-disruption: var(--reway-red);
  --status-ok:         #0B8E4A;   /* used only for confirmation dots in the app */
  --status-warn:       #B8720A;   /* construction/advisory */

  /* ---- Type families ---- */
  --font-display: 'Archivo Black', 'AXIS Extra Bold', 'Futura', system-ui, sans-serif;
  --font-sans:    'Futura', 'Jost', 'Futura PT', 'Century Gothic', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Type scale (px) ---- */
  --fs-12: 12px; --lh-12: 16px;
  --fs-14: 14px; --lh-14: 20px;
  --fs-16: 16px; --lh-16: 24px;
  --fs-18: 18px; --lh-18: 28px;
  --fs-20: 20px; --lh-20: 28px;
  --fs-24: 24px; --lh-24: 32px;
  --fs-32: 32px; --lh-32: 40px;
  --fs-40: 40px; --lh-40: 48px;
  --fs-56: 56px; --lh-56: 60px;
  --fs-72: 72px; --lh-72: 76px;
  --fs-96: 96px; --lh-96: 96px;

  /* ---- Spacing (4px base) ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* ---- Radii ---- */
  --r-0:  0;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-arch: 999px 999px 0 0; /* arched-card top radius */

  /* ---- Shadow system ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.10);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-mid:  240ms;

  /* ---- Layout ---- */
  --nav-h-marketing: 64px;
  --nav-h-app:       56px;
  --sidebar-w:       240px;
  --content-max:     1280px;
  --prose-max:       640px;
}

/* ---------- Base reset + defaults ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "ss01";
}

/* ---------- Semantic type ---------- */
.h-display { /* all-caps hero display */
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-96);
  line-height: var(--lh-96);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-72);
  line-height: var(--lh-72);
  letter-spacing: -0.02em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-56);
  line-height: var(--lh-56);
  letter-spacing: -0.015em;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  letter-spacing: -0.01em;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  letter-spacing: -0.005em;
  margin: 0;
}
.eyebrow { /* small uppercase label above section */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--reway-red);
}
.lead {
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  font-weight: 400;
  color: var(--fg-2);
  letter-spacing: -0.005em;
}
p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: 400;
  color: var(--fg-1);
}
.small {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--fg-2);
}
.meta {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}
code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--ink-04);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}
a {
  color: var(--fg-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-16);
  letter-spacing: 0;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn:focus-visible { outline: var(--border-focus); outline-offset: 2px; }

.btn-primary {
  background: var(--reway-red);
  color: var(--fg-on-red);
}
.btn-primary:hover  { background: var(--reway-red-hover); }
.btn-primary:active { background: var(--reway-red-active); }

.btn-secondary {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--ink-16);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--ink-40); }

.btn-ghost {
  background: transparent;
  color: var(--fg-1);
}
.btn-ghost:hover { background: var(--bg-hover); }

.btn-login { /* distinct treatment — always visible, outlined */
  background: var(--reway-black);
  color: var(--fg-on-dark);
  border-color: var(--reway-black);
}
.btn-login:hover { background: #222; border-color: #222; }

.btn-sm { height: 32px; padding: 0 12px; font-size: var(--fs-14); }
.btn-lg { height: 52px; padding: 0 28px; font-size: var(--fs-18); }

/* ---------- Inputs ---------- */
.input {
  height: 44px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  color: var(--fg-1);
  background: var(--bg-app);
  border: 1px solid var(--ink-16);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease);
  width: 100%;
}
.input:focus { outline: none; border-color: var(--reway-red); box-shadow: 0 0 0 3px rgba(245,33,70,0.18); }
.input::placeholder { color: var(--fg-3); }

.label {
  display: block;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 6px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--bg-elevated);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); }

.card-arch { /* arched top frame — REWAY signature */
  background: var(--reway-cream);
  border-top-left-radius: 120px;
  border-top-right-radius: 120px;
  padding: var(--s-10) var(--s-6) var(--s-6);
}

/* ---------- Flatterband ---------- */
.flatterband {
  --fb-w: 20px;
  --fb-angle: -30deg;
  background:
    repeating-linear-gradient(
      60deg,
      var(--reway-red) 0 var(--fb-w),
      var(--reway-cream) var(--fb-w) calc(var(--fb-w) * 2)
    );
  height: 40px;
}
.flatterband-on-white {
  background:
    repeating-linear-gradient(
      60deg,
      var(--reway-red) 0 var(--fb-w, 20px),
      var(--reway-white) var(--fb-w, 20px) calc(var(--fb-w, 20px) * 2)
    );
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  background: var(--ink-04);
  color: var(--fg-1);
}
.badge-red { background: var(--reway-red); color: var(--fg-on-red); }
.badge-outline { background: transparent; border: 1px solid var(--ink-16); }

/* ---------- Utility ---------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
@media (min-width: 1024px) {
  .container { padding: 0 var(--s-20); }
}
.prose { max-width: var(--prose-max); }
.hairline { border-top: var(--border-hairline); }
.hairline-cream { border-top: var(--border-cream); }
.divider { height: 1px; background: var(--ink-08); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}