/*
  MS7 theme layer.
  Loaded after app.css, account.css, and page-level styles so shared theme tokens
  can be changed here instead of editing repeated hardcoded colors across files.
*/

:root {
  color-scheme: dark;

  --ms7-bg: #06172e;
  --ms7-bg-soft: #0b2f6d;
  --ms7-panel: #031126;
  --ms7-panel-strong: #020a18;
  --ms7-line: rgba(218, 226, 239, .16);
  --ms7-line-strong: rgba(213, 164, 70, .42);

  --ms7-text: #f7f9fc;
  --ms7-muted: rgba(218, 226, 239, .76);
  --ms7-muted-strong: rgba(247, 249, 252, .90);

  --ms7-gold: #efdca3;
  --ms7-gold-deep: #efdca3;
  --ms7-gold-soft: rgba(215, 163, 71, .18);
  --ms7-danger: #ff5c5c;
  --ms7-success: #31d07b;
  --ms7-info: #5da9ff;

  --ms7-shadow: 0 20px 60px rgba(0, 0, 0, .48);
  --ms7-radius: 14px;

  /*
    Live surface aliases for the current MS7 deep blue/champagne look. Page files should
    consume these instead of hardcoding repeated blue, gold, and warm text.
  */
  --ms7-live-bg: var(--ms7-bg);
  --ms7-live-panel: #031126;
  --ms7-live-panel-soft: #08224f;
  --ms7-live-text: var(--ms7-text);
  --ms7-live-gold: var(--ms7-gold);
  --ms7-live-gold-text: #06172e;
  --ms7-live-muted: rgba(218, 226, 239, .78);
  --ms7-live-muted-soft: rgba(218, 226, 239, .64);
  --ms7-live-line: rgba(218, 226, 239, .16);
  --ms7-live-line-soft: rgba(218, 226, 239, .10);
  --ms7-live-line-strong: rgba(215, 163, 71, .44);

  /*
    Account/member surfaces. These mirror the current member dashboard look
    while giving account.css one shared color source.
  */
  --ms7-account-panel: rgba(3, 17, 38, .90);
  --ms7-account-panel-soft: rgba(8, 34, 79, .74);
  --ms7-account-panel-faint: rgba(218, 226, 239, .05);
  --ms7-account-panel-item: rgba(218, 226, 239, .07);
  --ms7-account-panel-hover: rgba(218, 226, 239, .10);
  --ms7-account-inset: rgba(2, 10, 24, .50);
  --ms7-account-inset-soft: rgba(2, 10, 24, .34);
  --ms7-account-inset-faint: rgba(2, 10, 24, .27);
  --ms7-account-line: rgba(218, 226, 239, .10);
  --ms7-account-line-soft: rgba(218, 226, 239, .12);
  --ms7-account-line-strong: rgba(215, 163, 71, .24);
  --ms7-account-line-hover: rgba(215, 163, 71, .34);
  --ms7-account-accent: rgba(215, 163, 71, 1);
  --ms7-account-accent-wash: rgba(215, 163, 71, .76);
  --ms7-account-accent-soft: rgba(215, 163, 71, .16);
  --ms7-account-accent-line: rgba(215, 163, 71, .36);
  --ms7-account-accent-copy-line: rgba(215, 163, 71, .44);
  --ms7-account-accent-copy-hover: rgba(215, 163, 71, .22);
  --ms7-account-accent-strong: rgba(215, 163, 71, .64);
  --ms7-account-accent-fill: rgba(215, 163, 71, .94);
  --ms7-account-accent-text: #06172e;
  --ms7-account-qr-bg: #fff;
  --ms7-account-badge-bg: rgba(4, 20, 49, .28);
  --ms7-account-table-head: rgba(218, 226, 239, .06);
  --ms7-account-promo-bg: linear-gradient(135deg, rgba(215, 163, 71, .74), rgba(11, 47, 109, .62));
  --ms7-account-dot-cash: #f6c343;
  --ms7-account-dot-chips: #23d3a4;
  --ms7-account-dot-bonus: #4da3ff;
  --ms7-account-danger: #ff5b5b;
  --ms7-account-danger-soft: rgba(255, 91, 91, .14);
  --ms7-account-danger-line: rgba(255, 91, 91, .25);
  --ms7-account-success: rgba(35, 211, 164, 1);
  --ms7-account-success-line: rgba(35, 211, 164, .25);
  --ms7-account-warn: #efdca3;
  --ms7-account-warn-soft: rgba(255, 190, 92, .12);
  --ms7-account-warn-line: rgba(255, 190, 92, .28);
  --ms7-account-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  --ms7-account-shadow-soft: 0 10px 28px rgba(0, 0, 0, .28);
  --ms7-account-shadow-faint: 0 10px 24px rgba(0, 0, 0, .18);
  --ms7-account-shadow-strong: 0 20px 60px rgba(0, 0, 0, .55);
  --ms7-account-modal: rgba(3, 17, 38, .98);
  --ms7-account-modal-backdrop: rgba(0, 0, 0, .55);
  --ms7-account-primary: rgba(215, 163, 71, .96);
  --ms7-account-primary-text: #06172e;

  /*
    Payment/deposit/withdraw surfaces. Keep these separate from base account
    tokens so payment pages can be tuned without disturbing profile/dashboard.
  */
  --ms7-payment-card: var(--ms7-account-panel-soft);
  --ms7-payment-card-line: rgba(255, 255, 255, .07);
  --ms7-payment-card-shadow: 0 10px 26px rgba(0, 0, 0, .25);
  --ms7-payment-card-shadow-soft: 0 10px 24px rgba(0, 0, 0, .18);
  --ms7-payment-inset: rgba(0, 0, 0, .25);
  --ms7-payment-inset-soft: rgba(0, 0, 0, .22);
  --ms7-payment-inset-faint: rgba(0, 0, 0, .20);
  --ms7-payment-choice: rgba(255, 255, 255, .04);
  --ms7-payment-choice-hover: rgba(255, 255, 255, .06);
  --ms7-payment-choice-strong: rgba(255, 255, 255, .05);
  --ms7-payment-line: rgba(255, 255, 255, .10);
  --ms7-payment-line-soft: rgba(255, 255, 255, .08);
  --ms7-payment-line-strong: rgba(255, 255, 255, .14);
  --ms7-payment-line-hover: rgba(255, 255, 255, .18);
  --ms7-payment-primary: rgba(255, 255, 255, .95);
  --ms7-payment-primary-text: #111;
  --ms7-payment-accent: var(--ms7-account-accent);
  --ms7-payment-accent-soft: var(--ms7-account-accent-soft);
  --ms7-payment-accent-line: var(--ms7-account-accent-line);
  --ms7-payment-accent-line-strong: rgba(11, 47, 109, .88);
  --ms7-payment-accent-focus: rgba(215, 163, 71, .18);
  --ms7-payment-danger: var(--ms7-account-danger);
  --ms7-payment-danger-soft: var(--ms7-account-danger-soft);
  --ms7-payment-danger-line: var(--ms7-account-danger-line);
  --ms7-payment-success: var(--ms7-account-success);
  --ms7-payment-success-line: var(--ms7-account-success-line);
  --ms7-payment-warn: var(--ms7-account-warn);
  --ms7-payment-warn-soft: var(--ms7-account-warn-soft);
  --ms7-payment-warn-line: var(--ms7-account-warn-line);

  /*
    Withdraw page deep blue/champagne redesign. These mirror the live surface tokens, but
    stay grouped so withdraw can be tuned independently from deposit/payment.
  */
  --ms7-withdraw-bg: var(--ms7-live-bg);
  --ms7-withdraw-bg-soft: var(--ms7-bg-soft);
  --ms7-withdraw-panel: var(--ms7-live-panel);
  --ms7-withdraw-panel-soft: var(--ms7-live-panel-soft);
  --ms7-withdraw-text: var(--ms7-live-text);
  --ms7-withdraw-muted: var(--ms7-live-muted);
  --ms7-withdraw-muted-soft: rgba(218, 226, 239, .68);
  --ms7-withdraw-muted-faint: rgba(218, 226, 239, .62);
  --ms7-withdraw-gold: var(--ms7-live-gold);
  --ms7-withdraw-gold-text: var(--ms7-live-gold-text);
  --ms7-withdraw-line: var(--ms7-live-line);
  --ms7-withdraw-line-soft: var(--ms7-history-line-soft);
  --ms7-withdraw-line-strong: var(--ms7-live-line-strong);
  --ms7-withdraw-line-status: rgba(215, 163, 71, .32);
  --ms7-withdraw-input-line: rgba(218, 226, 239, .20);
  --ms7-withdraw-focus: var(--ms7-history-line-faint);
  --ms7-withdraw-focus-panel: var(--ms7-panel);
  --ms7-withdraw-inset-line: rgba(218, 226, 239, .18);
  --ms7-withdraw-success: var(--ms7-history-success);
  --ms7-withdraw-success-line: var(--ms7-history-success-line);
  --ms7-withdraw-danger: var(--ms7-history-danger-soft);
  --ms7-withdraw-danger-line: rgba(255, 123, 123, .26);
  --ms7-withdraw-muted-status: rgba(218, 226, 239, .84);
  --ms7-withdraw-muted-strong: rgba(218, 226, 239, .76);

  /*
    Transaction/game history surfaces. These share the live deep blue/champagne visual
    treatment, but are grouped separately from payment and profile controls.
  */
  --ms7-history-bg: var(--ms7-bg);
  --ms7-history-panel: var(--ms7-live-panel);
  --ms7-history-panel-soft: var(--ms7-live-panel-soft);
  --ms7-history-panel-strong: var(--ms7-panel-strong);
  --ms7-history-text: var(--ms7-text);
  --ms7-history-text-soft: rgba(248, 251, 255, .88);
  --ms7-history-text-muted: rgba(218, 226, 239, .72);
  --ms7-history-text-faint: rgba(218, 226, 239, .62);
  --ms7-history-text-subtle: rgba(218, 226, 239, .58);
  --ms7-history-gold: var(--ms7-gold);
  --ms7-history-gold-text: #06172e;
  --ms7-history-line: rgba(218, 226, 239, .18);
  --ms7-history-line-soft: rgba(218, 226, 239, .12);
  --ms7-history-line-faint: rgba(218, 226, 239, .10);
  --ms7-history-line-strong: rgba(215, 163, 71, .34);
  --ms7-history-success: #56d99f;
  --ms7-history-success-soft: rgba(86, 217, 159, .10);
  --ms7-history-success-line: rgba(86, 217, 159, .24);
  --ms7-history-danger: #ff7b7b;
  --ms7-history-danger-soft: #ff9a9a;
  --ms7-history-danger-bg: rgba(255, 123, 123, .12);
  --ms7-history-danger-line: rgba(255, 123, 123, .25);

  /*
    Mobile shareholder drawer mode.
  */
  --ms7-share-bg: var(--ms7-live-bg);
  --ms7-share-panel: var(--ms7-live-panel);
  --ms7-share-panel-soft: var(--ms7-live-panel-soft);
  --ms7-share-panel-strong: var(--ms7-panel-strong);
  --ms7-share-panel-deep: #041431;
  --ms7-share-text: var(--ms7-live-text);
  --ms7-share-muted: var(--ms7-live-muted);
  --ms7-share-muted-soft: rgba(218, 226, 239, .64);
  --ms7-share-muted-subtle: var(--ms7-history-text-subtle);
  --ms7-share-gold: var(--ms7-live-gold);
  --ms7-share-gold-text: var(--ms7-live-panel);
  --ms7-share-line: var(--ms7-live-line);
  --ms7-share-line-soft: var(--ms7-history-line-soft);
  --ms7-share-line-strong: rgba(215, 163, 71, .40);
  --ms7-share-line-active: rgba(215, 163, 71, .72);
  --ms7-share-panel-line: rgba(218, 226, 239, .18);
  --ms7-share-icon-line: rgba(215, 163, 71, .28);
  --ms7-share-drawer-line: var(--ms7-live-line-strong);
  --ms7-share-glow-soft: rgba(215, 163, 71, .10);
  --ms7-share-glow: rgba(215, 163, 71, .30);
  --ms7-share-pulse: rgba(215, 163, 71, .34);
  --ms7-share-pulse-strong: rgba(215, 163, 71, .68);
  --ms7-share-shine: rgba(255, 255, 255, .76);
  --ms7-share-shine-bg: linear-gradient(90deg, transparent, var(--ms7-share-shine), transparent);
  --ms7-share-particle-glow: rgba(215, 163, 71, .72);

  /*
    Betting summary/date-filter surfaces. Keep this separate from payment and
    history so the turnover card can be tuned independently.
  */
  --ms7-bet-panel: rgba(0, 0, 0, .22);
  --ms7-bet-panel-soft: rgba(0, 0, 0, .18);
  --ms7-bet-surface: rgba(255, 255, 255, .06);
  --ms7-bet-surface-soft: rgba(255, 255, 255, .04);
  --ms7-bet-surface-faint: rgba(255, 255, 255, .05);
  --ms7-bet-line: rgba(255, 255, 255, .10);
  --ms7-bet-line-soft: rgba(255, 255, 255, .12);
  --ms7-bet-line-hover: rgba(255, 255, 255, .18);
  --ms7-bet-chip-bg: rgba(255, 255, 255, .08);
  --ms7-bet-progress-bg: rgba(255, 255, 255, .10);
  --ms7-bet-progress-fill: rgba(255, 255, 255, .65);
  --ms7-bet-accent: var(--ms7-account-accent);
  --ms7-bet-accent-soft: var(--ms7-account-accent-soft);
  --ms7-bet-accent-line: var(--ms7-account-accent-line);
  --ms7-bet-accent-line-strong: rgba(215, 163, 71, .44);
  --ms7-bet-accent-focus: rgba(215, 163, 71, .14);
  --ms7-bet-accent-text: var(--ms7-account-accent-text);
  --ms7-bet-text: rgba(255, 255, 255, .95);
  --ms7-bet-text-soft: rgba(255, 255, 255, .92);
  --ms7-bet-success: var(--ms7-account-success);
  --ms7-bet-danger: var(--ms7-account-danger);
  --ms7-bet-hero-bg: linear-gradient(135deg, var(--ms7-bet-accent-soft), var(--ms7-bet-surface-faint));
  --ms7-bet-shadow: 0 10px 26px rgba(0, 0, 0, .18);

  /*
    Game play/launch screen. This covers the iframe shell and mobile launch
    overlay that still lives inside the Blade file.
  */
  --ms7-play-bg: var(--ms7-live-bg);
  --ms7-play-panel: var(--ms7-live-panel);
  --ms7-play-panel-soft: var(--ms7-live-panel-soft);
  --ms7-play-panel-strong: var(--ms7-panel-strong);
  --ms7-play-text: rgba(248, 251, 255, .92);
  --ms7-play-text-strong: var(--ms7-live-text);
  --ms7-play-muted: rgba(218, 226, 239, .72);
  --ms7-play-muted-soft: rgba(218, 226, 239, .56);
  --ms7-play-muted-faint: rgba(218, 226, 239, .46);
  --ms7-play-gold: var(--ms7-gold);
  --ms7-play-gold-bright: var(--ms7-gold-deep);
  --ms7-play-gold-title: var(--ms7-gold-deep);
  --ms7-play-gold-text: #06172e;
  --ms7-play-line: rgba(218, 226, 239, .22);
  --ms7-play-line-soft: rgba(218, 226, 239, .12);
  --ms7-play-line-strong: rgba(215, 163, 71, .40);
  --ms7-play-overlay: rgba(0, 0, 0, .78);
  --ms7-play-art-bg: rgba(215, 163, 71, .12);
  --ms7-play-shadow: 0 18px 46px rgba(0, 0, 0, .50);
  --ms7-play-shadow-soft: 0 18px 38px rgba(0, 0, 0, .45);
  --ms7-play-launch-bg:
    radial-gradient(circle at 50% 26%, rgba(215, 163, 71, .18), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(218, 226, 239, .16), transparent 32%),
    linear-gradient(180deg, #0b2f6d 0%, #08224f 58%, #06172e 100%);
  --ms7-play-button-bg: linear-gradient(135deg, #efdca3 0%, #efdca3 52%, #efdca3 100%);
  --ms7-play-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);

  /*
    Existing CSS still reads these short names. Keep them mapped here while
    pages are migrated one by one to the ms7-* tokens.
  */
  --bg: var(--ms7-bg);
  --panel: var(--ms7-panel);
  --panel2: var(--ms7-bg-soft);
  --line: var(--ms7-line);
  --text: var(--ms7-text);
  --muted: var(--ms7-muted);
  --accent: var(--ms7-gold);
  --accent2: var(--ms7-gold-deep);
  --shadow: var(--ms7-shadow);
  --radius: var(--ms7-radius);
}

body.page {
  color: var(--ms7-text);
  background-color: var(--ms7-bg);
  background-image: none;
}

.btn--primary,
.nav__auth,
.auth-btn--primary,
.auth-submit,
.modal-submit {
  background: linear-gradient(180deg, var(--ms7-gold), var(--ms7-gold-deep));
  color: #06172e;
  border-color: rgba(0, 0, 0, .30);
}

.topbar,
.mobile-nav,
.modal,
.auth-modal,
.drawer,
.dropdown,
.account-card,
.panel,
.card {
  border-color: var(--ms7-line);
}

.link:hover,
.nav__link:hover,
.nav__link.is-active,
.kicker,
.accent,
.text-accent {
  color: var(--ms7-gold);
}