/* ===========================================================
   adsbe Design System — Colors & Typography
   Brand: adsbe. — Performance Marketing fur Live Entertainment
   Dark-First. Laut. Kompromisslos.
   =========================================================== */

/* Poppins — lokal gehostet (Performance + DSGVO: kein externer Google-Request).
   Nur latin-Subset (inkl. Umlaute), 4 genutzte Weights. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/poppins-800.woff2') format('woff2')}

:root {
  /* ——— BRAND CONSTANTS (mode-independent) ——— */
  --adsbe-blue:        #4175FF;
  --adsbe-blue-hover:  #3060E8;
  --adsbe-blue-bright: #6B9AFF;
  --adsbe-blue-700:    #2E5AD4;
  --adsbe-blue-600:    #4175FF;
  --adsbe-blue-500:    #6B9AFF;
  --adsbe-blue-400:    #8DB3FF;
  --adsbe-blue-300:    #B0CCFF;
  --adsbe-blue-100:    #DDE8FF;
  --adsbe-blue-50:     #EEF3FF;

  --adsbe-green:       #E1F09A;
  --adsbe-green-hover: #D4E680;
  --adsbe-green-dim:   rgba(225, 240, 154, 0.15);

  --adsbe-black:       #000000;
  --adsbe-white:       #FFFFFF;

  /* ——— TYPOGRAPHY FAMILIES ——— */
  --font-display: 'Monigue', 'Poppins', sans-serif;  /* Display / H1 — expressive, uppercase */
  --font-heading: 'Poppins', sans-serif;             /* H2 and sub-headlines */
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono:    'Poppins', sans-serif;

  /* ——— TYPE SCALE (rem-based, 16px root) ——— */
  --fs-display: 2.5rem;   /* 40px */
  --fs-h1:      1.75rem;  /* 28px */
  --fs-h2:      1.25rem;  /* 20px */
  --fs-body:    0.9375rem;/* 15px */
  --fs-small:   0.8125rem;/* 13px */
  --fs-label:   0.6875rem;/* 11px */
  --fs-data:    0.8125rem;/* 13px */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  --ls-tighter: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.12em;

  /* ——— SPACING (4px base grid) ——— */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-base: 16px;
  --space-lg:   20px;
  --space-xl:   24px;
  --space-2xl:  32px;
  --space-3xl:  40px;
  --space-4xl:  48px;
  --space-5xl:  64px;

  /* ——— RADIUS ——— */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 100px;
}

/* ——— DARK MODE (primary — adsbe identity) ——— */
[data-theme="dark"], :root {
  --bg-page:        #000000;
  --bg-base:        #050508;
  --bg-surface:     #0A0A0F;
  --bg-card:        #111118;
  --bg-card-hover:  #181822;
  --bg-elevated:    #1A1A26;
  --bg-glass:       rgba(0, 0, 0, 0.85);

  --border:         rgba(65, 117, 255, 0.10);
  --border-strong:  rgba(65, 117, 255, 0.25);
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-card:    rgba(65, 117, 255, 0.08);

  --fg1:            #FFFFFF;                   /* primary text */
  --fg2:            #94A3B8;                   /* secondary text */
  --fg3:            #64748B;                   /* muted meta */
  --text-primary:   #FFFFFF;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  --text-on-blue:   #FFFFFF;

  --accent-label:    var(--adsbe-blue-500);
  --accent-label-bg: rgba(65, 117, 255, 0.10);
  --accent-green:    var(--adsbe-green);
  --accent-green-bg: var(--adsbe-green-dim);

  /* Status */
  --status-live:        #34D399;
  --status-live-bg:     rgba(52, 211, 153, 0.10);
  --status-live-border: rgba(52, 211, 153, 0.25);
  --status-running:        var(--adsbe-blue-500);
  --status-running-bg:     rgba(65, 117, 255, 0.10);
  --status-running-border: rgba(65, 117, 255, 0.25);
  --status-setup:        #FCB900;
  --status-setup-bg:     rgba(252, 185, 0, 0.10);
  --status-setup-border: rgba(252, 185, 0, 0.25);
  --status-testing:        #A78BFA;
  --status-testing-bg:     rgba(167, 139, 250, 0.10);
  --status-testing-border: rgba(167, 139, 250, 0.25);
  --status-paused:        #94A3B8;
  --status-paused-bg:     rgba(148, 163, 184, 0.06);
  --status-paused-border: rgba(148, 163, 184, 0.12);
  --status-blocked:        #F87171;
  --status-blocked-bg:     rgba(248, 113, 113, 0.10);
  --status-blocked-border: rgba(248, 113, 113, 0.25);
  --status-soldout:        var(--adsbe-green);
  --status-soldout-bg:     rgba(225, 240, 154, 0.08);
  --status-soldout-border: rgba(225, 240, 154, 0.20);

  /* Shadows */
  --shadow-card:       0 2px 8px rgba(0,0,0,0.4), 0 0 1px rgba(65,117,255,0.06);
  --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.5), 0 0 24px rgba(65,117,255,0.08);
  --shadow-elevated:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-glow:       0 0 24px rgba(65,117,255,0.10);
  --shadow-glow-green: 0 0 24px rgba(225,240,154,0.08);
  --shadow-mock:       0 8px 32px rgba(0,0,0,0.6);

  --feature-gradient: linear-gradient(135deg, var(--bg-card) 0%, rgba(65,117,255,0.06) 100%);
  --feature-bar:      linear-gradient(180deg, var(--adsbe-blue-500), var(--adsbe-blue));
  --logo-color:       var(--adsbe-blue);
}

[data-theme="light"] {
  --bg-page:        #F0F2F5;
  --bg-base:        #F8FAFC;
  --bg-surface:     #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #F1F5F9;
  --bg-elevated:    #F1F5F9;
  --bg-glass:       rgba(255,255,255,0.90);

  --border:         rgba(65,117,255,0.12);
  --border-strong:  rgba(65,117,255,0.25);
  --border-subtle:  #E2E8F0;
  --border-card:    #E2E8F0;

  --fg1:            #000000;
  --fg2:            #475569;
  --fg3:            #94A3B8;
  --text-primary:   #000000;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;
  --text-on-blue:   #FFFFFF;

  --accent-label:    var(--adsbe-blue);
  --accent-label-bg: var(--adsbe-blue-50);
  --accent-green:    #6B8A00;
  --accent-green-bg: rgba(225,240,154,0.3);

  --status-live:        #059669;
  --status-live-bg:     rgba(5,150,105,0.08);
  --status-live-border: rgba(5,150,105,0.20);
  --status-running:        var(--adsbe-blue);
  --status-running-bg:     rgba(65,117,255,0.08);
  --status-running-border: rgba(65,117,255,0.20);
  --status-setup:        #D97706;
  --status-setup-bg:     rgba(217,119,6,0.08);
  --status-setup-border: rgba(217,119,6,0.20);
  --status-testing:        #7C3AED;
  --status-testing-bg:     rgba(124,58,237,0.08);
  --status-testing-border: rgba(124,58,237,0.20);
  --status-paused:        #64748B;
  --status-paused-bg:     rgba(100,116,139,0.08);
  --status-paused-border: rgba(100,116,139,0.15);
  --status-blocked:        #DC2626;
  --status-blocked-bg:     rgba(220,38,38,0.08);
  --status-blocked-border: rgba(220,38,38,0.20);
  --status-soldout:        #059669;
  --status-soldout-bg:     rgba(5,150,105,0.06);
  --status-soldout-border: rgba(5,150,105,0.15);

  --shadow-card:       0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 4px 12px rgba(65,117,255,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-elevated:   0 4px 16px rgba(0,0,0,0.06);
  --shadow-glow:       0 0 20px rgba(65,117,255,0.06);
  --shadow-glow-green: 0 0 20px rgba(225,240,154,0.06);
  --shadow-mock:       0 8px 32px rgba(0,0,0,0.08);

  --feature-gradient: linear-gradient(135deg, #FFFFFF 0%, rgba(65,117,255,0.04) 100%);
  --feature-bar:      linear-gradient(180deg, var(--adsbe-blue-400), var(--adsbe-blue));
  --logo-color:       var(--adsbe-blue);
}

/* ===========================================================
   SEMANTIC TYPE CLASSES
   Use these directly, or mirror them into your own components.
   =========================================================== */

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  text-transform: uppercase;
  color: var(--fg1);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg1);
}

h2, .t-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg1);
}

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg2);
}

.t-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-label);
}

.t-data {
  font-family: var(--font-mono);
  font-size: var(--fs-data);
  color: var(--accent-label);
}

code, .t-code {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-label);
}