/* TEQWERK / QUNIS Day 2026 — Design Tokens
   Global importieren, VOR allen anderen Stylesheets. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Sora:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand */
  --tq-ink:         #061324;
  --tq-ink-2:       #0b1a2e;
  --tq-orange-100:  #FFCCB2;
  --tq-orange-200:  #FF9762;
  --tq-orange-500:  #FF7430;
  --tq-violet-100:  #E4DCFF;
  --tq-violet-200:  #C4B4FF;
  --tq-violet-500:  #9E82F0;
  --tq-magenta-100: #E9C4F5;
  --tq-magenta-200: #D293E3;
  --tq-magenta-500: #C573DB;
  --tq-paper-0:     #FFFFFF;
  --tq-paper-1:     #F4F2F0;
  --tq-paper-2:     #ECEAE7;
  --tq-paper-3:     #E1DEDA;

  /* Semantic */
  --fg-1:        var(--tq-ink);
  --fg-2:        rgba(6, 19, 36, 0.72);
  --fg-3:        rgba(6, 19, 36, 0.50);
  --fg-on-dark:  #ffffff;
  --fg-on-dark-2: rgba(255, 255, 255, 0.72);
  --bg-page:     var(--tq-paper-1);
  --bg-surface:  #ffffff;
  --bg-muted:    var(--tq-paper-2);
  --bg-subtle:   var(--tq-violet-100);
  --bg-inverse:  var(--tq-ink);
  --accent:      var(--tq-orange-500);
  --accent-cool: var(--tq-violet-500);
  --border-1:    rgba(6, 19, 36, 1);
  --border-2:    rgba(6, 19, 36, 0.18);

  /* Gradients */
  --grad-hero: linear-gradient(115deg, #C4B4FF 0%, #C9A2F1 22%, #D293E3 45%, #FF9762 78%, #FF7430 100%);
  --grad-hero-glow: radial-gradient(120% 140% at 18% 95%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0) 55%);
  --grad-card: linear-gradient(135deg, #C4B4FF 0%, #E9C4F5 50%, #FF9762 100%);
  --grad-bar:  linear-gradient(90deg, #E4DCFF 0%, #C4B4FF 18%, #9E82F0 32%, #C573DB 52%, #FF9762 78%, #FF7430 100%);

  /* Type */
  --font-display: 'Sora', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Space Grotesk', 'Sora', ui-sans-serif, system-ui, sans-serif;
  --fs-d1: clamp(48px, 7vw, 92px);
  --fs-d2: clamp(40px, 5.5vw, 72px);
  --fs-d3: clamp(32px, 4vw, 52px);
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --lh-display: 1.04;
  --lh-heading: 1.18;
  --lh-body: 1.55;
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-eyebrow: 0.18em;
  --ls-logo: 0.16em;

  /* Radii & space */
  --radius-pill: 9999px;
  --radius-card: 24px;
  --radius-card-lg: 32px;
  --radius-input: 12px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(6,19,36,0.04), 0 1px 1px rgba(6,19,36,0.03);
  --shadow-2: 0 4px 18px rgba(6,19,36,0.06), 0 1px 2px rgba(6,19,36,0.04);
  --shadow-3: 0 16px 40px rgba(6,19,36,0.08), 0 4px 12px rgba(6,19,36,0.05);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-medium); letter-spacing: var(--ls-heading); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
p  { color: var(--fg-2); text-wrap: pretty; }

a { color: var(--fg-1); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

.tq-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.tq-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }

@keyframes tqRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tq-enter { animation: tqRise var(--dur-slow) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}