/* Winasa landing — the brand book version.
   The same site with the app's `agency` brand applied: Power Pulse indigo,
   Lucky Charm for money, Flame for urgency, Rich Black on Linen.

   Every value here is lifted from mobile/lib/core/theme/app_colors.dart rather
   than eyeballed, so the site and the app cannot drift into two nearly-matching
   blues. If a colour changes there, change it here. */

:root[data-brand="agency"] {
  /* Grounds. Linen for the page, a shade deeper for anything that needs to
     recede — the same relationship the app keeps between the campaigns feed and
     the cards sitting on it. */
  --bg: #f5ede4;            /* Linen — app posterGround */
  --bg-deep: #ebe0d1;       /* app campaignsBackground */
  --surface: #ffffff;

  --ink: #04010f;           /* Rich Black */
  --muted: #6e6a7d;

  /* The gradient stops. Power Pulse → a mid violet → Lucky Charm, mirroring the
     app's three-stop heat gradient so the energy reads the same way. */
  --red: #3432ff;           /* Power Pulse — the primary action colour */
  --pink: #7b3bff;
  --coral: #a544ff;         /* Lucky Charm */
  --heat: linear-gradient(120deg, #3432ff, #7b3bff 55%, #a544ff);
  --accent-glow: rgba(52, 50, 255, 0.26);

  /* Money and prize moments. The book names Lucky Charm for luck, so it lands
     on the word that means it — prize amounts, the WIN eyebrow, the stat band. */
  --gold: #a544ff;
  --gold-tint: #f2e9ff;
  --gold-ink: #55198f;
  /* The money gradient in Lucky Charm. Power Pulse at the deep end so the
     ticket still reads as one family with the rest of the brand rather than as
     a lilac object that wandered in. */
  --gold-deep: #5a1fb0;
  --gold-light: #d4a8ff;
  --gold-band-a: #f7f0ff;
  --gold-band-b: #efe4ff;
  --gold-body: #5b5168;
  --gold-shadow: rgba(90, 31, 176, 0.35);

  /* Flame is urgency and nothing else. Used sparingly or it stops meaning
     anything — a countdown in its last day, a nearly-gone draw. */
  --urgency: #ff6427;

  --border: rgba(4, 1, 15, 0.10);
  --shadow: 0 10px 34px rgba(4, 1, 15, 0.08);

  /* Gilmer is the book's typeface and is commercially licensed, so it is not
     bundled. Jost is the closest free stand-in — geometric, same wide-set
     capitals — and is what the app uses for this brand too. */
  --font-display: "Jost", "Futura", "Century Gothic", sans-serif;
}

/* Jost is proportional where Oswald is condensed, so the same headline runs
   noticeably wider. Pulling the tracking in and easing the weight keeps the big
   type from crowding its container at the sizes the layout was set for. */
:root[data-brand="agency"] h1,
:root[data-brand="agency"] h2,
:root[data-brand="agency"] h3,
:root[data-brand="agency"] .footer-big {
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* Money keeps the heavier weight — an amount should still hit hardest. */
:root[data-brand="agency"] .stat-num,
:root[data-brand="agency"] .draw-amount,
:root[data-brand="agency"] .p-price,
:root[data-brand="agency"] .feat-amount,
:root[data-brand="agency"] .slim-amount,
:root[data-brand="agency"] .ticket-amount {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The wordmark is Power Pulse rather than ink, exactly as in the app. It is the
   one place the brand signs its name, and the book puts it in colour. */
:root[data-brand="agency"] .wordmark {
  color: var(--red);
}

/* Use the same logo artwork as the app, preserving its distinctive silhouette. */
:root[data-brand="agency"] .wordmark,
:root[data-brand="agency"] .phone-wm {
  display: inline-block;
  width: 130px;
  height: 32px;
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
  background-color: var(--red);
  -webkit-mask: url('assets/wordmark.png') center / contain no-repeat;
  mask: url('assets/wordmark.png') center / contain no-repeat;
}
:root[data-brand="agency"] .phone-wm {
  width: 90px;
  height: 23px;
}
:root[data-brand="agency"] .footer .wordmark {
  width: 110px;
  height: 28px;
  background-color: #fff;
}

/* Section eyebrows follow the primary. */
:root[data-brand="agency"] .label {
  color: var(--red);
  letter-spacing: 0.2em;
}

/* Linen is warmer and lighter than the heat ground, so white cards no longer
   separate from it on contrast alone. A hairline border does the work the
   background used to. */
:root[data-brand="agency"] .card,
:root[data-brand="agency"] .p-card,
:root[data-brand="agency"] .faq-item {
  border: 1px solid var(--border);
}

/* The store band sits a shade lighter than the page, the same way the app's
   Store sits lighter than the campaigns feed — more air, which is what a shop
   wants. */
:root[data-brand="agency"] .store {
  background: #f7f2eb;
}