/* ============================================================
   TCLG EVENT TECHNOLOGY — Design System Tokens
   Colors, Typography, Spacing, Shadows, Radii
   ============================================================ */

/* Google Fonts werden NICHT hier geladen — der Cookie-Banner injiziert
   sie erst nach Zustimmung des Nutzers (DSGVO). Bis dahin greifen die
   System-Font-Fallbacks aus den --font-* Tokens. */

/* ============================================================
   COLOR PRIMITIVES
   ============================================================ */
:root {
  /* Brand Blues */
  --color-navy-900:    #060D1E;
  --color-navy-800:    #0A1628;
  --color-navy-700:    #0D1E3A;
  --color-navy-600:    #0C2B5A;
  --color-blue-primary: #0C41AB;
  --color-blue-medium:  #246AA9;
  --color-blue-steel:   #577290;
  --color-blue-light:   #7B9CC4;
  --color-blue-pale:    #B5CCEA;

  /* Teal / Cyan */
  --color-teal-600:    #2D8A9C;
  --color-teal-500:    #48A5B5;
  --color-teal-400:    #6BBFCC;
  --color-teal-200:    #B3E2EA;

  /* Warm Neutral */
  --color-rose-700:    #6B4A53;
  --color-rose-500:    #93727B;
  --color-rose-300:    #C4A8AF;

  /* Magenta / Energy */
  --color-magenta-700: #9A0F90;
  --color-magenta-500: #D916C8;
  --color-magenta-400: #E861DE;
  --color-magenta-200: #F4ADEF;

  /* Neutrals */
  --color-white:       #FFFFFF;
  --color-gray-100:    #F2F4F8;
  --color-gray-200:    #D8DDE8;
  --color-gray-400:    #8A96A8;
  --color-gray-600:    #4A5568;
  --color-gray-800:    #1E2535;
  --color-black:       #000000;

  /* ============================================================
     SEMANTIC COLORS
     ============================================================ */

  /* Backgrounds */
  --bg-page:           var(--color-navy-800);
  --bg-surface:        var(--color-navy-700);
  --bg-surface-raised: #122040;
  --bg-overlay:        rgba(10, 22, 40, 0.92);
  --bg-light:          var(--color-gray-100);
  --bg-light-surface:  var(--color-white);

  /* Foregrounds */
  --fg-primary:        var(--color-white);
  --fg-secondary:      var(--color-blue-pale);
  --fg-muted:          var(--color-blue-steel);
  --fg-inverse:        var(--color-navy-800);

  /* Brand / Interactive */
  --color-brand:       var(--color-blue-primary);
  --color-brand-hover: #1B55C8;
  --color-accent:      var(--color-teal-500);
  --color-accent-hover:var(--color-teal-400);
  --color-highlight:   var(--color-magenta-500);

  /* Status */
  --color-success:     #22C55E;
  --color-warning:     #F59E0B;
  --color-error:       #EF4444;
  --color-info:        var(--color-teal-500);

  /* Borders */
  --border-default:    rgba(87, 114, 144, 0.35);
  --border-accent:     rgba(72, 165, 181, 0.5);
  --border-strong:     var(--color-blue-steel);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Font Families */
  --font-display:      'Exo 2', 'Arial', sans-serif;
  --font-body:         'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:         'DM Mono', 'Courier New', monospace;

  /* Font Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Type Scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

  /* Line Heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* Letter Spacing */
  --ls-tight:   -0.03em;
  --ls-normal:  0em;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;
  --ls-widest:  0.2em;

  /* ============================================================
     SPACING
     ============================================================ */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS & ELEVATION
     ============================================================ */
  --shadow-sm:   0 1px 4px rgba(12, 65, 171, 0.15);
  --shadow-md:   0 4px 20px rgba(12, 65, 171, 0.25);
  --shadow-lg:   0 8px 40px rgba(12, 65, 171, 0.35);
  --shadow-glow: 0 0 20px rgba(72, 165, 181, 0.4);
  --shadow-glow-magenta: 0 0 20px rgba(217, 22, 200, 0.4);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:   150ms ease-out;
  --transition-base:   200ms ease-out;
  --transition-slow:   300ms ease-out;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.t-hero {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.t-h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

.t-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
}

/* ============================================================
   BASE RESETS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--fg-primary);
  background: var(--bg-page);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-medium); }
h5 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-medium); }
h6 { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--fw-semibold); }

p { line-height: var(--lh-relaxed); }
code { font-family: var(--font-mono); font-size: 0.9em; }

a {
  color: var(--color-teal-500);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--color-teal-400); }