/* ============================================================
 * cjump_tokens.css — Brand-Tokens fuer CJump Frontend-Rebuild
 * ============================================================
 * Plan-File-Ref: ich-m-chte-mit-dir-wild-starlight.md Z.40-53 + Z.207-211
 * Stand: 2026-05-15 (Phase 3 Foundation)
 *
 * Single-Source-of-Truth fuer Farben, Typo, Spacing, Radii, Shadows.
 * KEIN Hardcoded #RRGGBB in HTML/CSS-Pages — immer var(--cj-...) nutzen.
 * Verwendet von movemate_patterns.css + allen athlete/* + coach/* Pages.
 * ============================================================ */

:root {
  /* ─── Brand-Farben (Plan-File-Z.42-46) ─────────────────── */
  --cj-anthrazit:           #262626;     /* Primary Background */
  --cj-anthrazit-lighter:   #1F1F1F;     /* Card-Background, slightly lighter for inner-glow */
  --cj-anthrazit-light:     #1A1F2B;     /* Stats-Card-Background */
  --cj-anthrazit-darker:    #141414;     /* Modal-Overlay-Background */
  --cj-electric:            #1A8CFF;     /* Primary CTAs, Active Tabs, Brand-Akzent */
  --cj-electric-dark:       #1573D3;     /* CTA-Hover/Active */
  --cj-electric-light:      #67B8FF;     /* Gradient-Stop for Conic-Rings */
  /* ─── Logo-Blau-Verlauf (Carlo 17.06.) — Kontinuitaet App+Landing mit dem CJ-Monogramm ───
   * --cj-grad-logo  = EXAKT der Logo-Verlauf (#9BD0FF->#0A5FCC). Nur DEKORATIV/TEXT (kein weisser
   *                   Text drauf - oben #9BD0FF ist zu hell fuer weisse Schrift, WCAG ~1.6:1).
   * --cj-grad-primary = button-tauglicher Verlauf DERSELBEN Familie (gleicher Endpunkt #0A5FCC),
   *                   oben Brand-Electric statt Hellblau -> weisser Bold-Text bleibt lesbar (>=3:1). */
  --cj-grad-logo:           linear-gradient(180deg, #9BD0FF 0%, #0A5FCC 100%);
  /* Buttons = Launch-Button-Verlauf (Carlo 22.06.): unten-dunklerer Teil des Monogramms, oben #2E97FF
   * (= launch.html --grad-btn), damit weisser Bold-Text top sicher lesbar ist. App-weit konsistent zur LP. */
  --cj-grad-primary:        linear-gradient(180deg, #2E97FF 0%, #0A5FCC 100%);
  --cj-grad-primary-hover:  linear-gradient(180deg, #3FA0FF 0%, #0E6BE0 100%);
  --cj-btn-text-shadow:     0 1px 2px rgba(4, 18, 42, 0.55);
  /* Monogramm-Button-Stil (Carlo 22.06.): Anthrazit-Innenrand + weisser Aussenrand, GLEICHE Dicke (je 2px). */
  --cj-mono-border:         2px solid #262626;
  --cj-mono-ring:           0 0 0 2px #FFFFFF;
  --cj-white:               #FFFFFF;     /* Body-Text auf Anthrazit */
  --cj-white-70:            rgba(255, 255, 255, 0.7);   /* Sub-Copy (WCAG ok auf Anthrazit) */
  --cj-white-50:            rgba(255, 255, 255, 0.5);   /* Muted (Labels uppercase) */
  --cj-white-30:            rgba(255, 255, 255, 0.3);   /* Disabled / Outer Wheel-Items */
  --cj-white-10:            rgba(255, 255, 255, 0.1);   /* Hairline-Borders, Bar-Track */

  /* ─── 5 Saeulen-Farben (Carlo-Direktive 19.05. — Clean Approach) ─── */
  /* 4 weisse Bars + 1 Brand-Gradient fuer System ("auf CJump aufgebaut") */
  --cj-saeule-fundament:    #FFFFFF;     /* Weiss — Belastbarkeit/Mobility/Body-Comp */
  --cj-saeule-kraft:        #FFFFFF;     /* Weiss — Maximalkraft/Power */
  --cj-saeule-explosivitaet:#FFFFFF;     /* Weiss — RFD/Vert-PRs/Speed */
  --cj-saeule-skill:        #FFFFFF;     /* Weiss — Volumen-Quality/Technik */
  --cj-saeule-system:       #FFFFFF;     /* Weiss — Compliance/Streak (Fallback fuer Border etc.) */
  /* System-Bar: Brand-Blau-Verlauf (Bar-Background only). Rot raus 2026-06-10 — Rot ist reine Signalfarbe. */
  --cj-saeule-system-bar:   linear-gradient(90deg, #1A8CFF 0%, #5FB3FF 100%);

  /* ─── Saeulen-Gradient-Stops fuer Persona-Card (M13) ─── */
  /* Mit Anthrazit-Akzent fuer subtile Tiefe trotz Weiss */
  --cj-saeule-fundament-gradient:    linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.6) 100%);
  --cj-saeule-kraft-gradient:        linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.6) 100%);
  --cj-saeule-explosivitaet-gradient:linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.6) 100%);
  --cj-saeule-skill-gradient:        linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.6) 100%);
  --cj-saeule-system-gradient:       linear-gradient(135deg, #1A8CFF 0%, #5FB3FF 100%);

  /* ─── Status-Farben (eigenstaendig, nicht mehr an Saeule-Kraft gebunden) ── */
  --cj-success:             #32CD32;     /* LimeGreen (Carlo 23.06.: #7CFC00 war zu hell/stechend) — Done-Checks, Im-Plan. Text auf gruen-gefuelltem Grund = Anthrazit (dunkel, Kontrast ~10:1), nie weiss (waere ~3:1). */
  --cj-on-success:          #14210A;     /* dunkler Text/Icon auf gruenem Grund (Kontrast zu #32CD32 ~10.4:1) */
  --cj-warning:             #FB923C;     /* Orange — Compliance-Alerts */
  --cj-danger:              #EB4E4E;     /* Signal-Red (NICHT Marke) — Pain ≥7, Risk-Flags. Seit 2026-06-10 reine Signalfarbe, kein Brand-Akzent. */
  --cj-info:                var(--cj-electric);
  --cj-anniversary:         #EC4899;     /* Pink — Birthday-Badges, Cake-Emoji-Section */

  /* ─── Pack-Tier-Farben (Plan-File-Z.396-407 + Pack-Opening-Patterns P1-P2) ─── */
  --cj-pack-bronze:         #CD7F32;
  --cj-pack-silver:         #C0C0C0;
  --cj-pack-gold:           #FFD700;
  --cj-pack-diamond:        #67E8F9;     /* Cyan, anders als Saeule-Skill (heller) */
  --cj-pack-hall-of-fame:   #A855F7;     /* Lila — Hard-Cap 99 */

  /* ─── Typo-Scale (Plan-File-Z.43, Modular 1.333) ──────── */
  --cj-font-display:        'Bebas Neue', 'Arial Narrow', sans-serif;  /* Headlines, Big-Numbers */
  --cj-font-body:           'Nunito Sans', 'Segoe UI', sans-serif;     /* Body, Caption, Labels */
  --cj-font-editorial:      'Cormorant Garamond', Georgia, serif;      /* Editorial-Use (A-Pick 03.06.) */

  /* Display-Sizes */
  --cj-text-display-xl:     96px;   /* OVR-Hero (Bebas) */
  --cj-text-display-lg:     72px;   /* Card-Stack-Splash-Wordmark */
  --cj-text-display-md:     48px;   /* Saeulen-Card-Big-Number */
  --cj-text-display-sm:     32px;   /* Section-Headers, Reveal-Persona-Name */

  /* Body-Sizes */
  --cj-text-body-xl:        18px;   /* Body-Default, Persona-Card-Body */
  --cj-text-body-lg:        16px;   /* Set-Row-Exercise-Name */
  --cj-text-body-md:        14px;   /* Subtitle, Meta-Footer */
  --cj-text-body-sm:        12px;   /* Caption */
  --cj-text-body-xs:        11px;   /* Section-Label uppercase letter-spaced */

  /* ─── Line-Heights (Plan-Design-Principles Rule 9) ─── */
  --cj-line-display:        1.1;
  --cj-line-body:           1.5;
  --cj-line-tight:          1.25;

  /* ─── Letter-Spacing ─── */
  --cj-tracking-tight:      -0.02em;
  --cj-tracking-normal:     0;
  --cj-tracking-wide:       0.05em;
  --cj-tracking-wider:      0.15em;     /* Section-Labels uppercase */

  /* ─── 8pt-Grid Spacing (Plan-Design-Principles Rule 15) ─── */
  --cj-space-1:             8px;
  --cj-space-2:             16px;
  --cj-space-3:             24px;
  --cj-space-4:             32px;
  --cj-space-5:             40px;
  --cj-space-6:             48px;
  --cj-space-7:             56px;
  --cj-space-8:             64px;
  --cj-space-10:            80px;
  --cj-space-12:            96px;
  --cj-space-16:            128px;

  /* ─── Radii ─── */
  --cj-r-sm:                8px;
  --cj-r-md:                12px;
  --cj-r-card:              18px;     /* Standard-Card-Radius (Plan-File-Z.37) */
  --cj-r-lg:                20px;     /* Modal-Sheets */
  --cj-r-pill:              50px;     /* Pills, Buttons */
  --cj-r-circle:            50%;

  /* ─── Shadows + Inner-Glows ─── */
  --cj-shadow-card:         0 4px 24px rgba(0, 0, 0, 0.4);
  --cj-shadow-card-hover:   0 8px 32px rgba(0, 0, 0, 0.5);
  --cj-shadow-cta:          0 4px 24px rgba(26, 140, 255, 0.3);
  --cj-shadow-cta-hover:    0 6px 32px rgba(26, 140, 255, 0.5);
  --cj-shadow-pack-bronze:  0 0 32px 8px rgba(139, 90, 60, 0.5);
  --cj-shadow-pack-silver:  0 0 40px 12px rgba(200, 200, 200, 0.5);
  --cj-shadow-pack-gold:    0 0 56px 16px rgba(255, 193, 7, 0.6);
  --cj-shadow-pack-diamond: 0 0 80px 24px rgba(6, 182, 212, 0.7);

  --cj-inner-glow:          inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --cj-inner-glow-strong:   inset 0 0 24px rgba(255, 255, 255, 0.04);

  /* ─── Z-Index-Scale ─── */
  --cj-z-base:              1;
  --cj-z-card:              10;
  --cj-z-sticky:            100;
  --cj-z-overlay:           1000;
  --cj-z-modal:             10000;
  --cj-z-toast:             100000;

  /* ─── Transitions ─── */
  --cj-trans-fast:          150ms cubic-bezier(0.4, 0, 0.2, 1);
  --cj-trans-base:          200ms cubic-bezier(0.4, 0, 0.2, 1);
  --cj-trans-slow:          400ms cubic-bezier(0.16, 1, 0.3, 1);
  --cj-trans-spring:        600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
 * Reduced-Motion-Respect (WCAG + Quality-Gate)
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * Base-Reset + Body-Defaults
 * ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--cj-font-body);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.cj-app {
  margin: 0;
  font-size: var(--cj-text-body-xl);
  line-height: var(--cj-line-body);
  color: var(--cj-white);
  background: var(--cj-anthrazit);
  min-height: 100vh;
  min-height: 100dvh;
}

select,
.cj-select {
  color-scheme: dark;
  background: var(--cj-anthrazit-lighter);
  color: var(--cj-white);
}

select option,
.cj-select option {
  background: #1F1F1F;
  color: #FFFFFF;
}

/* ============================================================
 * Safe-Area-Insets (iOS notch + bottom)
 * ============================================================ */
body.cj-app {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}