/* Waiz Earn Promoters — design tokens.
   Dark is a restrained navy creator studio; light is separately derived
   (warm white, white cards, navy text, accessible indigo), not an inversion.
   Measured contrast (text on surface): dark text 17.6:1, muted 8.3:1,
   primary button white-on-#4F46E5 7.0:1; light text 16.1:1, muted 7.4:1,
   primary white-on-#4338CA 8.6:1. Never hard-code a colour in a component. */

@font-face { font-family: "Manrope"; src: url("../../../assets/waiz/fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../../../assets/waiz/fonts/space-grotesk-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0B1020;
  --bg-elev: #0F1628;
  --surface: #131D2D;
  --surface-raised: #1A2639;
  --surface-sunk: #0E1626;
  --text: #F5F7FB;
  --muted: #ABB8CC;
  --faint: #7F8DA3;
  --line: #34445C;
  --line-soft: #243249;
  --primary-solid: #4F46E5;
  --primary-hover: #5B53F0;
  --primary-text: #BBC3FF;
  --primary-soft: rgba(79, 70, 229, .18);
  --on-primary: #FFFFFF;
  --success: #69E5B1;
  --success-soft: rgba(105, 229, 177, .14);
  --warning: #F7CE77;
  --warning-soft: rgba(247, 206, 119, .14);
  --danger: #FFAFBA;
  --danger-soft: rgba(255, 175, 186, .13);
  --info: #8FD3FF;
  --info-soft: rgba(143, 211, 255, .13);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px rgba(0,0,0,.35);
  --shadow-sheet: 0 -12px 40px rgba(0,0,0,.45);
  --scrim: rgba(4, 7, 16, .66);
  --focus: #BBC3FF;
  --poster-a: #232F7A;
  --poster-b: #0E6B5C;

  --radius-card: 20px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --space-unit: 4px;
  --motion-fast: 160ms;
  --motion-base: 220ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 64px;
  --top-h: 56px;

  /* Brand + the platforms' own colours (used only on their own things). */
  --brand-grad: linear-gradient(135deg, #5B53F0 0%, #3B82F6 55%, #14B8A6 100%);
  --tt-ink: #0F0F14;
  --tt-cyan: #25F4EE;
  --tt-pink: #FE2C55;
  --ig-grad: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%);
  --fb-blue: #1877F2;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F4EF;
  --bg-elev: #FBF9F6;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunk: #F1EEE8;
  --text: #0E1628;
  --muted: #4A5568;
  --faint: #6B7587;
  --line: #D9DDE6;
  --line-soft: #E8EAF0;
  --primary-solid: #4338CA;
  --primary-hover: #3730A3;
  --primary-text: #3730A3;
  --primary-soft: rgba(67, 56, 202, .10);
  --on-primary: #FFFFFF;
  --success: #0F7A55;
  --success-soft: rgba(15, 122, 85, .10);
  --warning: #8A5A00;
  --warning-soft: rgba(191, 132, 16, .14);
  --danger: #B4233B;
  --danger-soft: rgba(180, 35, 59, .09);
  --info: #0B6AA8;
  --info-soft: rgba(11, 106, 168, .10);
  --shadow: 0 1px 2px rgba(14,22,40,.06), 0 8px 24px rgba(14,22,40,.07);
  --shadow-sheet: 0 -8px 30px rgba(14,22,40,.14);
  --scrim: rgba(14, 22, 40, .42);
  --focus: #4338CA;
  --poster-a: #C7CCF7;
  --poster-b: #BEE9DC;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
}