/* ============================================================
   BUSINESS GLADIATORS — DESIGN TOKENS
   COLOR-SET "POWER" (per BG BrandBook Refined V1, 10.06.2025)
   ============================================================ */

/* ---------- FONT FACES (Urbanist) ---------- */
@font-face {
  font-family: 'Urbanist';
  src: url('../assets/fonts/Urbanist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Urbanist';
  src: url('../assets/fonts/Urbanist-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Static fallbacks for environments that don't accept variable fonts */
@font-face { font-family: 'Urbanist'; src: url('../assets/fonts/Urbanist-Light.ttf')      format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('../assets/fonts/Urbanist-Regular.ttf')    format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('../assets/fonts/Urbanist-Medium.ttf')     format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('../assets/fonts/Urbanist-SemiBold.ttf')   format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('../assets/fonts/Urbanist-Bold.ttf')       format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('../assets/fonts/Urbanist-ExtraBold.ttf')  format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('../assets/fonts/Urbanist-Black.ttf')      format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ============================================================
     POWER COLOR SET — the only set in use.
     "DO NOT MIX IT" with CLARITY per brand book.
     ============================================================ */

  /* Primary surface / heading / logo / accent on white */
  --bg-capri: #483CFF;

  /* Secondary fill for surfaces & backgrounds */
  --bg-pink: #ED6CB4;

  /* Accent / text on white & sky / black-on-power */
  --bg-black: #000000;
  --bg-white: #FFFFFF;

  /* Aliases for clarity-set-adjacent neutrals (rarely used in POWER) */
  --bg-rose: #FFB3FD;   /* CLARITY secondary — kept for reference only, do not use */
  --bg-sky:  #BAEBFF;   /* CLARITY primary  — kept for reference only, do not use */

  /* ---------- POWER gradient (Capri → Pink @ 315°) ---------- */
  --bg-gradient-power:
    linear-gradient(315deg, #483CFF 0%, #ED6CB4 100%);

  /* Brand-book spec says "50% / 50%" — sharp midpoint variant */
  --bg-gradient-power-hard:
    linear-gradient(315deg, #483CFF 50%, #ED6CB4 50%);

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: #000000;          /* primary text on white */
  --fg-2: rgba(0,0,0,0.72); /* secondary text on white */
  --fg-3: rgba(0,0,0,0.48); /* tertiary / captions */
  --fg-on-power: #FFFFFF;   /* text on capri/pink/gradient surfaces */

  --surface-page:    #FFFFFF;
  --surface-power:   #483CFF;
  --surface-pink:    #ED6CB4;
  --surface-overlay: rgba(0,0,0,0.04); /* light card on white */

  /* ---------- Strokes & dividers ---------- */
  --stroke-1: rgba(0,0,0,0.08);
  --stroke-on-power: rgba(255,255,255,0.18);

  /* ============================================================
     TYPOGRAPHY — Urbanist for everything.
     Brand book specifies Headlines in Black/Extrabold, ALL CAPS,
     letter-spacing -5%, line-height 0.8–0.9. Body in Light.
     ============================================================ */
  --font-family-sans: 'Urbanist', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

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

  /* Type scale (px @ 16-base; suit decks 1920×1080 and web) */
  --fs-display:  clamp(64px, 9vw, 160px);
  --fs-h1:       clamp(48px, 6vw, 96px);
  --fs-h2:       clamp(36px, 4.4vw, 64px);
  --fs-h3:       clamp(24px, 2.6vw, 36px);
  --fs-lead:     clamp(20px, 1.4vw, 24px);
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-eyebrow:  13px;

  /* Letter spacing — display/headlines run TIGHT (-0.05em) per brand book */
  --tracking-headline:  -0.05em;
  --tracking-eyebrow:    0.08em;

  /* Line heights — tight for headlines (umlauts safe at 0.85), loose for body */
  --lh-display:  0.85;
  --lh-heading:  0.9;
  --lh-body:     1.5;
  --lh-tight:    1.2;

  /* ============================================================
     SPACING — gentle, generous (consulting / premium feel)
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ============================================================
     RADII — derived from the STAR symbol ratio (1.33)
     Star = 100% reference. Outer box = 75%. Inner box = 56.25%.
     Brand book example: inner 24px, outer 32px, star 42px.
     ============================================================ */
  --radius-star:  1;        /* 100% — reserved for the spark shape itself */
  --radius-outer: 0.75;     /* 75%  — outer cards, photo crops, buttons */
  --radius-inner: 0.5625;   /* 56.25% — inner panels / nested elements */

  /* Concrete pixel values that follow the ratio */
  --radius-xs:   6px;
  --radius-sm:  12px;
  --radius-md:  18px;
  --radius-lg:  24px;   /* inner box */
  --radius-xl:  32px;   /* outer box */
  --radius-2xl: 42px;   /* star reference */
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — gentle drop shadow on gradients, boxes, buttons
     (brand book: "Verläufe erhalten leichten Drop Shadow",
     "Boxen erhalten Drop Shadow & werden dadurch sanfter")
     ============================================================ */
  --shadow-soft:
      0 6px 24px rgba(72, 60, 255, 0.12),
      0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-tile:
      0 18px 60px rgba(72, 60, 255, 0.18),
      0 4px 14px rgba(0, 0, 0, 0.10);
  --shadow-button:
      0 6px 16px rgba(0, 0, 0, 0.18);

  /* ============================================================
     MOTION — keep it understated; brand isn't bouncy
     ============================================================ */
  --easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --easing-emph:     cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   420ms;
}

/* ============================================================
   BASE TYPOGRAPHY ELEMENTS
   These mirror the brand book specimen (page 6).
   ============================================================ */
html, body {
  font-family: var(--font-family-sans);
  color: var(--fg-1);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display ("URBANIST CLAIM/STATEMENT" in brand book) */
.bg-display,
h1.bg-display {
  font-family: var(--font-family-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Headline ("URBANIST HEADLINE.") */
.bg-h1, h1 {
  font-family: var(--font-family-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Sub-headline ("Urbanist Zwischenüberschrift.") — sentence-case, half-bold */
.bg-h2, h2 {
  font-family: var(--font-family-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.bg-h3, h3 {
  font-family: var(--font-family-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

/* Lead paragraph */
.bg-lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* Body ("Urbanist Fließtext.") — Light weight per brand book */
.bg-body, p {
  font-family: var(--font-family-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

/* Eyebrow / numeric label (e.g. "01.") */
.bg-eyebrow {
  font-family: var(--font-family-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bg-capri);
}

/* Caption */
.bg-caption {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--fg-3);
}