/* ============================================================
   Treibiq Design System — Tokens
   Source: Figma (Untitled.fig) + brand copy
   Version: 1.0
   ============================================================ */

/* ----- Fonts ------------------------------------------------ */
/* Inter is loaded from the Google Fonts CDN as the primary face.
   We pair with Plus Jakarta Sans as a fallback because the
   rendered wordmark in the brand PNGs has a slightly more
   geometric flavor than Inter. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

:root {
  /* ---------- Brand color — primary --------------------------- */
  --violet-500: #AC88FF;   /* primary brand purple */
  --violet-400: #9DA1FF;
  --violet-300: #9A88FF;
  --violet-200: #C7B3FF;
  --violet-100: #E8DEFF;
  --violet-050: #F5F0FF;

  --peach-500: #FF9966;    /* primary brand peach */
  --peach-400: #FFB088;
  --peach-300: #FFCC99;
  --peach-200: #FFD9B3;
  --peach-100: #FFE8D1;
  --peach-050: #FFF4E8;

  /* ---------- Brand color — neutrals -------------------------- */
  --ink:        #3F3965;   /* wordmark + body text */
  --ink-soft:   #5A547A;
  --ink-mute:   #8A85A3;
  --ink-faint:  #C5C2D4;
  --hairline:   rgb(63 57 101 / 0.08);
  --hairline-strong: rgb(63 57 101 / 0.16);

  --paper:      #FBF9FE;   /* page background */
  --paper-warm: #FFFBF7;   /* peach-tinted alt */
  --white:      #FFFFFF;

  /* ---------- Semantic --------------------------------------- */
  --bg:         var(--paper);
  --bg-elev:    var(--white);
  --bg-dark:    var(--ink);
  --fg:         var(--ink);
  --fg-soft:    var(--ink-soft);
  --fg-mute:    var(--ink-mute);
  --fg-on-dark: var(--paper);

  --accent:        var(--violet-500);
  --accent-warm:   var(--peach-500);
  --accent-hover:  #9F77FF;
  --accent-press:  #8F62FF;

  --success:    #2EB57A;
  --warning:    var(--peach-500);
  --danger:     #E0556B;

  --focus-ring: rgb(172 136 255 / 0.4);

  /* ---------- Brand gradient --------------------------------- */
  --gradient-brand: linear-gradient(180deg,
    #AC88FF 0%,
    #9DA1FF 35%,
    #FF9966 70%,
    #FFCC99 100%);
  --gradient-brand-h: linear-gradient(90deg,
    #AC88FF 0%,
    #9DA1FF 35%,
    #FF9966 70%,
    #FFCC99 100%);
  --gradient-soft: linear-gradient(180deg,
    rgb(172 136 255 / 0.10) 0%,
    rgb(255 153 102 / 0.10) 100%);

  /* ---------- Type — families ------------------------------- */
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "Menlo", monospace;

  /* ---------- Type — scale ---------------------------------- */
  /* Fluid Type via clamp(min, preferred-vw, max). Min-Werte sind so
     gewaehlt dass auf 320px iPhone SE Headlines nicht ueberlaufen.
     Max-Werte = bisheriger Desktop-Default. vw-Komponente skaliert
     zwischen den Punkten sauber. Wo Komponenten heute lokale font-size-
     Werte setzen, gewinnen die noch (z.B. Hero-Title hat eigenes clamp). */
  --t-eyebrow:   11px;
  --t-caption:   13px;
  --t-body-sm:   14px;
  --t-body:      16px;
  --t-body-lg:   18px;
  --t-h6:        20px;
  --t-h5:        clamp(20px, 3.2vw, 24px);
  --t-h4:        clamp(24px, 4.2vw, 32px);
  --t-h3:        clamp(28px, 5.4vw, 40px);
  --t-h2:        clamp(32px, 6.8vw, 56px);
  --t-h1:        clamp(36px, 8vw, 72px);
  --t-display:   clamp(44px, 11vw, 96px);

  /* ---------- Type — weight --------------------------------- */
  --w-regular:   400;
  --w-medium:    500;
  --w-semi:      600;
  --w-bold:      700;
  --w-black:     800;

  /* ---------- Type — leading & tracking --------------------- */
  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-normal:   1.4;
  --lh-relaxed:  1.55;

  --tr-tight:    -0.025em;
  --tr-snug:     -0.012em;
  --tr-normal:   0;
  --tr-wide:     0.08em;

  /* ---------- Spacing --------------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  /* ---------- Radii ----------------------------------------- */
  --r-xs:    6px;
  --r-sm:    12px;
  --r-md:    16px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-pill:  999px;

  /* ---------- Shadows --------------------------------------- */
  --shadow-card-rest:   0 0 0 1px var(--hairline);
  --shadow-card-hover:  0 12px 32px -16px rgb(63 57 101 / 0.12),
                        0 0 0 1px var(--hairline-strong);
  --shadow-elev:        0 24px 64px -32px rgb(63 57 101 / 0.18);
  --shadow-button:      0 1px 0 rgb(63 57 101 / 0.06);
  --shadow-popover:     0 16px 48px -12px rgb(63 57 101 / 0.16),
                        0 0 0 1px var(--hairline);
  --shadow-focus:       0 0 0 4px var(--focus-ring);

  /* ---------- Motion ---------------------------------------- */
  --ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:         120ms;
  --t-base:         200ms;
  --t-card:         280ms;
  --t-slow:         420ms;
  --t-reveal:       600ms;

  /* ---------- Layout ---------------------------------------- */
  --container:      1600px;
  --container-pad:  clamp(24px, 5vw, 80px);
  --gutter:         24px;
  --r-sm:           14px;
  --r-md:           18px;
  --r-lg:           24px;
  --r-xl:           28px;
  --lift-subtle:    translateY(-2px);
  --lift-strong:    translateY(-4px);
  /* Breakpoints: --bp-sm 640px, --bp-md 768px, --bp-lg 1024px, --bp-xl 1280px, --bp-2xl 1536px. */
  --ink-rgb:        63, 57, 101;

  /* ---------- Defaults fuer fehlende Vars ------------------- */
  --font-serif:     "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --violet-700:     #6648CB;
}

/* ============================================================
   Semantic element styles — base typographic primitives
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, .display {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-bold);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.display { font-size: var(--t-display); }

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-bold);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: var(--w-bold);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: var(--w-bold);
  color: var(--fg);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--t-h5);
  line-height: var(--lh-snug);
  font-weight: var(--w-semi);
  color: var(--fg);
  margin: 0;
}

h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--t-h6);
  line-height: var(--lh-normal);
  font-weight: var(--w-semi);
  color: var(--fg);
  margin: 0;
}

p, .body {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
  margin: 0;
  text-wrap: pretty;
}

.lede {
  font-size: var(--t-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}

.caption {
  font-size: var(--t-caption);
  color: var(--fg-mute);
  line-height: var(--lh-normal);
}

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-soft);
}

a {
  color: var(--fg);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
/* a:hover NUR auf hover-faehigen Geraeten. Sonst bleibt auf Touch
   nach jedem Tap der Link violet + underlined sticky bis User woanders
   tippt. */
@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--violet-050);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--ink);
}

::selection {
  background: var(--violet-200);
  color: var(--ink);
}