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

/* ============================================================
   Triebwerk — Design Tokens
   Brand: SCHWUNGVOLL (franzsauerstein.de)
   Navy + Gold, Spartan sans-serif, pill buttons, clean & professional.
   This is NOT tenant-overridable — Triebwerk always looks SCHWUNGVOLL.
   ============================================================ */

:root {
  /* SCHWUNGVOLL brand palette */
  --color-navy:          #1b2a44;
  --color-navy-light:    #2a3d5c;
  --color-gold:          #a38b65;
  --color-gold-light:    #e7d09c;
  --color-gold-bg:       #f5f0e6;

  /* Functional aliases */
  --color-primary:       var(--color-navy);
  --color-primary-hover: var(--color-navy-light);
  --color-accent:        var(--color-gold);
  --color-accent-hover:  #8a7554;
  --color-accent-light:  var(--color-gold-bg);

  /* Neutral palette */
  --color-ink:           #0a0a0a;
  --color-charcoal:      #333333;
  --color-gray:          #6b7280;
  --color-border:        #e2e2e2;
  --color-surface:       #f7f7f7;
  --color-canvas:        #ffffff;
  --color-white:         #ffffff;

  /* Semantic */
  --color-success:       #2d8a4e;
  --color-warning:       #c47f17;
  --color-error:         #c53030;
  --color-info:          #2b6cb0;

  /* Typography — Spartan (SCHWUNGVOLL house font) */
  --font-body:           'Spartan', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:           'Courier New', Courier, monospace;
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  0.9375rem;
  --text-lg:    1.125rem;
  --text-xl:    1.375rem;
  --text-2xl:   1.75rem;
  --text-3xl:   2.25rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shapes — pill buttons, subtle cards */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 9999px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --transition:  200ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-accent-hover); }

.label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray);
}