/* ════════════════════════════════════════════════════════════
   WINPOP BRAND TOKENS — assets/css/brand.css
   Single source of truth. Edit here → changes everywhere.
   Source of truth document: assets/BRAND.md
   ════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────── */
/* Display / Headlines: Nunito 700, 800                        */
/* Body / UI:           Plus Jakarta Sans 400, 500, 600, 700   */
/* Code / Mono:         JetBrains Mono 400                     */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap');

:root {

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Nunito', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Brand Colors: Primary ─────────────────────────────────
     Purple: ~70 % of brand surfaces                           */
  --color-purple-primary: #4F2D66;   /* Deep Purple — logo, headings, primary buttons */
  --color-purple-light:   #6B4F7D;   /* Soft Purple — hover states, secondary elements */
  --color-purple-muted:   #9D8DA9;   /* Muted Purple — disabled, placeholder on dark */

  /* ── Brand Colors: Accent ──────────────────────────────────
     Gold: 10–15 % — ONLY for win/reward moments and CTAs      */
  --color-gold-primary:   #B8960C;   /* Win Gold — CTAs, wins, active pointer, premium */
  --color-gold-light:     #D4B23A;   /* Light Gold — hover on gold elements */
  --color-gold-pale:      #F0DFA0;   /* Pale Gold — tints, subtle backgrounds */

  /* ── Brand Colors: Neutrals ────────────────────────────── */
  --color-night:          #0F0F1A;   /* Dashboard background, dark UI */
  --color-dark-surface:   #1A1A2E;   /* Cards on dark background */
  --color-snow:           #FAFAFA;   /* Light UI background */
  --color-light-gray:     #F3F4F6;   /* Section backgrounds, input fields */
  --color-border:         #E5E7EB;   /* Borders, dividers on light */
  --color-text-primary:   #1A1A2E;   /* Main text on light */
  --color-text-muted:     #6B7280;   /* Secondary text, labels on light */
  --color-text-light:     #EBEBEB;   /* Main text on dark */

  /* ── Brand Colors: Semantic ─────────────────────────────── */
  --color-success:        #10B981;   /* Confirmed wins, saved states */
  --color-warning:        #F59E0B;   /* Attention needed */
  --color-error:          #EF4444;   /* Errors, destructive actions */

  /* ── Spacing Scale (base unit: 4 px) ─────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radius ─────────────────────────────────────────
     Source: BRAND.md § Border Radius                          */
  --radius-btn:   8px;      /* buttons, inputs */
  --radius-card:  12px;     /* cards */
  --radius-modal: 16px;     /* modals, large cards */
  --radius-full:  9999px;   /* avatars, tags, pills */
  /* Aliases used by existing CSS */
  --radius:    8px;
  --radius-sm: 5px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ── Shadows ────────────────────────────────────────────────
     Source: BRAND.md § Shadows                                */
  --shadow-sm:     0 1px 2px rgba(0,0,0,.05);
  --shadow-md:     0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:     0 8px 24px rgba(0,0,0,.12);
  --shadow-purple: 0 4px 20px rgba(79,45,102,.3);
  --shadow-gold:   0 4px 20px rgba(184,150,12,.3);

  /* ── Dark UI Tokens (Admin Dashboard) ──────────────────────
     Source: BRAND.md § Dark Mode                              */
  --bg:           var(--color-night);           /* #0F0F1A — page background */
  --bg2:          #10101e;                      /* topbar, dialogs */
  --bg3:          var(--color-dark-surface);    /* #1A1A2E — cards, inputs */
  --bg4:          #22223a;                      /* hover backgrounds */

  --sidebar-bg:     #0A0A14;
  --sidebar-active: rgba(79,45,102,.3);

  --text:           var(--color-text-light);    /* #EBEBEB */
  --text-muted:     rgba(235,235,235,.5);
  --border:         rgba(255,255,255,.08);

  --card-bg:        rgba(255,255,255,.055);
  --card-border:    rgba(255,255,255,.11);

  /* Dark input styles */
  --input-bg:           rgba(255,255,255,.07);  /* glass — frontend forms */
  --input-border:       rgba(255,255,255,.1);
  --input-focus-border: rgba(79,45,102,.5);     /* purple glow on focus */

  /* Toggle */
  --toggle-active:   var(--color-gold-primary); /* #B8960C */
  --toggle-inactive: #3A3A4E;

  /* ── Semantic Aliases ──────────────────────────────────────
     Legacy variable names used across existing CSS.
     Change the --color-* tokens above; these aliases follow.  */
  --gold:       #FFD700;                        /* bright spin-wheel gold (non-brand) */
  --gold-dk:    var(--color-gold-primary);      /* #B8960C — brand gold */
  --gold-deep:  #E6A800;
  --gold-hover: var(--color-gold-light);        /* #D4B23A */
  --gold-glow:  rgba(255,215,0,.28);
  --green:      var(--color-success);
  --red:        var(--color-error);
  --danger:     var(--color-error);
  --success:    var(--color-success);
  --warning:    var(--color-warning);

}

/* ════════════════════════════════════════════════════════════
   LIGHT MODE TOKENS
   Aktiviert via [data-theme="light"] auf <html>
   Standard (kein Attribut): Dark Mode (wie bisher)
   ════════════════════════════════════════════════════════════ */

[data-theme="light"] {

  /* ── Hintergründe ──────────────────────────────────────── */
  --bg:             var(--color-snow);           /* #FAFAFA */
  --bg2:            #ffffff;                     /* topbar, dialoge */
  --bg3:            var(--color-light-gray);     /* #F3F4F6 */
  --bg4:            #E5E7EB;                     /* hover */

  --sidebar-bg:     #F3F4F6;
  --sidebar-active: rgba(79,45,102,.12);

  /* ── Texte ─────────────────────────────────────────────── */
  --text:           var(--color-text-primary);   /* #1A1A2E */
  --text-muted:     var(--color-text-muted);     /* #6B7280 */

  /* ── Borders & Cards ───────────────────────────────────── */
  --border:         rgba(0,0,0,.1);
  --card-bg:        rgba(0,0,0,.03);
  --card-border:    rgba(0,0,0,.1);

  /* ── Inputs ────────────────────────────────────────────── */
  --input-bg:           #ffffff;
  --input-border:       rgba(0,0,0,.15);
  --input-focus-border: rgba(79,45,102,.45);

  /* ── Toggles ───────────────────────────────────────────── */
  --toggle-active:   var(--color-gold-primary);
  --toggle-inactive: #CBD5E0;

  /* ── Gold: auf weißem Grund unleserlich → Lila ─────────── */
  --gold:       var(--color-purple-primary);     /* #4F2D66 */
  --gold-glow:  rgba(79,45,102,.15);

}

/* ════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY
   Source: BRAND.md § Type Scale
   ════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-body);
  font-size: 1rem;        /* 16px */
  font-weight: 400;
  line-height: 1.6;
}

h1 {
  font-family: var(--font-display);
  font-size: 3rem;        /* 48px */
  font-weight: 800;
  line-height: 1.2;
}
h2 {
  font-family: var(--font-display);
  font-size: 2rem;        /* 32px */
  font-weight: 700;
  line-height: 1.3;
}
h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;      /* 24px */
  font-weight: 700;
  line-height: 1.3;
}
h4 {
  font-family: var(--font-body);
  font-size: 1.25rem;     /* 20px */
  font-weight: 600;
  line-height: 1.4;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* Type utility classes */
.text-body-sm {
  font-family: var(--font-body);
  font-size: 0.875rem;    /* 14px */
  font-weight: 400;
  line-height: 1.5;
}
.text-caption {
  font-family: var(--font-body);
  font-size: 0.75rem;     /* 12px */
  font-weight: 500;
  line-height: 1.4;
}
.text-btn {
  font-family: var(--font-body);
  font-size: 0.875rem;    /* 14px */
  font-weight: 600;
  line-height: 1;
}
.text-nav {
  font-family: var(--font-body);
  font-size: 0.875rem;    /* 14px */
  font-weight: 500;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════
   BRAND BUTTON UTILITIES
   Source: BRAND.md § Buttons
   Use .btn-brand-* on <button> or <a> elements.
   These are additive and do not override existing .btn rules.
   ════════════════════════════════════════════════════════════ */

.btn-brand-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-purple-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.btn-brand-primary:hover { background: var(--color-purple-light); color: #fff; }

.btn-brand-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-gold-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.btn-brand-cta:hover { background: var(--color-gold-light); color: #fff; }

.btn-brand-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--color-purple-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.btn-brand-secondary:hover { background: var(--color-light-gray); }

.btn-brand-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  border-radius: var(--radius-btn);
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
}
.btn-brand-ghost:hover { color: var(--color-purple-primary); }

.btn-brand-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-error);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.btn-brand-danger:hover { background: #DC2626; color: #fff; }

/* ════════════════════════════════════════════════════════════
   BRAND LOGO / ARTWORK UTILITIES
   Für alle Seiten: Artwork (animiert, über dem Logo) + Logo (Wordmark, kein Text)
   ════════════════════════════════════════════════════════════ */

@keyframes brand-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Artwork-Illustration — immer mit floating-Animation verwenden */
.brand-artwork {
  display: block;
  animation: brand-float 4s ease-in-out infinite;
}

/* Logo-Wordmark als <img> — kein Text daneben nötig, Logo enthält "winpop" */
.brand-logo-img {
  display: block;
}