/* Space Magic — Colors & Type */

/* ──────────────────────────────────────────────────────
   BRAND FONT: Futura LT Pro Medium
   Offizielle Markenschrift laut Corporate Design Manual 2024
   Für Headlines, Sublines, Fließtext und Leuchtschrift
   ────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Futura LT Pro';
  src: url('fonts/FuturaLTPro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Fallback-Akzentschrift für Neon-Effekt (kondensiertes Display) */
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');

:root {
  /* ─── PRIMÄRFARBEN ─── */
  --sm-opal:         #2e2653;  /* Opal Blue 260 30 30 */
  --sm-dark:         #0b1135;  /* Dark denim blue 250 20 25 */
  --sm-tuerkis:      #6cc4cc;  /* Fischer Blue 220 60 30 */
  --sm-cherry:       #823a8b;  /* Cherry 340 40 40 */

  /* ─── SEKUNDÄRFARBEN ─── */
  --sm-gray:         #c6c6c6;  /* RAL 7045 */
  --sm-white:        #ffffff;
  --sm-yellow:       #fff482;  /* Sport Yellow 095 85 50 */
  --sm-red:          #d44f48;  /* Vermilion red 030 50 40 */
  --sm-pink:         #d44893;  /* Persian red 360 50 50 */
  --sm-green:        #34de6a;  /* March green 100 80 80 */

  /* ─── SEMANTISCHE FARBEN ─── */
  --sm-bg:           var(--sm-dark);
  --sm-bg-2:         var(--sm-opal);
  --sm-fg:           var(--sm-white);
  --sm-fg-muted:     var(--sm-gray);
  --sm-accent:       var(--sm-tuerkis);
  --sm-accent-2:     var(--sm-cherry);
  --sm-highlight:    var(--sm-yellow);
  --sm-success:      var(--sm-green);
  --sm-danger:       var(--sm-red);

  /* ─── TRANSPARENZ-STUFEN (laut Manual: 100/75/50/25) ─── */
  --sm-alpha-100:    1.00;
  --sm-alpha-75:     0.75;
  --sm-alpha-50:     0.50;
  --sm-alpha-25:     0.25;

  /* ─── TYPOGRAFIE ─── */
  --sm-font-display: 'Monoton', 'Futura LT Pro', sans-serif;  /* Neon-Headlines */
  --sm-font-body:    'Futura LT Pro', 'Jost', 'Futura', sans-serif;

  /* ─── TYPE SCALE ─── */
  --sm-text-xs:   12px;
  --sm-text-sm:   14px;
  --sm-text-base: 16px;
  --sm-text-lg:   20px;
  --sm-text-xl:   28px;
  --sm-text-2xl:  40px;
  --sm-text-3xl:  56px;
  --sm-text-4xl:  80px;
  --sm-text-5xl:  120px;

  /* ─── SPACING ─── */
  --sm-space-1: 4px;
  --sm-space-2: 8px;
  --sm-space-3: 12px;
  --sm-space-4: 16px;
  --sm-space-6: 24px;
  --sm-space-8: 32px;
  --sm-space-12: 48px;
  --sm-space-16: 64px;
}

/* ─── SEMANTISCHE TYPE-STYLES ─── */
.sm-neon {
  font-family: var(--sm-font-display);
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 4px #fff,
    0 0 8px #fff,
    0 0 14px var(--sm-tuerkis),
    0 0 22px var(--sm-tuerkis),
    0 0 36px var(--sm-tuerkis);
}

.sm-metal {
  font-family: var(--sm-font-body);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f4f4f4 0%, #c6c6c6 40%, #7a7a7a 55%, #e8e8e8 80%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

h1, .sm-h1 {
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: var(--sm-text-3xl);
  color: var(--sm-fg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
h2, .sm-h2 {
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: var(--sm-text-2xl);
  color: var(--sm-fg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h3, .sm-h3 {
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: var(--sm-text-xl);
  color: var(--sm-fg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
p, .sm-body {
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: var(--sm-text-base);
  color: var(--sm-fg);
  line-height: 1.5;
}
.sm-caption {
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: var(--sm-text-xs);
  color: var(--sm-fg-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}