/* ============================================================
   MYSTERY BOX — DESIGN TOKENS
   Extraído 1:1 das telas de referência.
   Toda cor, raio, sombra e tamanho do app sai daqui.
   ============================================================ */

:root {
  /* ---------- SUPERFÍCIES (dark quente, nunca cinza neutro) ---------- */
  --bg-root:        #070502;   /* fundo absoluto do app */
  --bg-canvas:      #0C0803;   /* fundo das telas */
  --bg-surface:     #141009;   /* cards */
  --bg-surface-2:   #1C160C;   /* cards elevados / listas */
  --bg-surface-3:   #251D10;   /* hover / selecionado */
  --bg-sheet:       #100C05;   /* bottom sheets e modais */
  --bg-nav:         #0A0703;   /* tab bar */
  --bg-scrim:       rgba(5, 3, 1, 0.78);

  /* ---------- OURO (a marca) ---------- */
  --gold-50:        #FFF8E3;
  --gold-100:       #FFEEBC;
  --gold-200:       #FBDF93;
  --gold-300:       #F5CD6B;   /* texto dourado padrão */
  --gold-400:       #EDB948;
  --gold-500:       #E0A42C;   /* cor-chave da marca */
  --gold-600:       #C2851B;
  --gold-700:       #94620F;
  --gold-800:       #5E3E08;
  --gold-900:       #2E1E04;

  /* Gradientes de ouro — o botão primário usa o `--grad-gold-cta` */
  --grad-gold-cta:  linear-gradient(180deg, #FBDF93 0%, #EDB948 38%, #D29621 100%);
  --grad-gold-text: linear-gradient(180deg, #FFF3CB 0%, #F3C661 48%, #C98C1C 100%);
  --grad-gold-line: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  --grad-sheen:     linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);

  /* ---------- TIERS DOS BOXES ---------- */
  --tier-bronze:    #C97B3C;
  --tier-bronze-2:  #8A4D1E;
  --tier-prata:     #CBD2DB;
  --tier-prata-2:   #7D8894;
  --tier-ouro:      #EDB948;
  --tier-ouro-2:    #B07D14;
  --tier-diamante:  #8FE3F5;
  --tier-diamante-2:#2E8FA8;

  /* ---------- SEMÂNTICAS ---------- */
  --ok:             #38D07A;
  --ok-bg:          rgba(56, 208, 122, 0.12);
  --ok-border:      rgba(56, 208, 122, 0.32);
  --warn:           #F2B33D;
  --warn-bg:        rgba(242, 179, 61, 0.12);
  --danger:         #F2564A;
  --danger-bg:      rgba(242, 86, 74, 0.12);
  --danger-border:  rgba(242, 86, 74, 0.34);
  --info:           #5BB8F5;
  --info-bg:        rgba(91, 184, 245, 0.12);

  /* ---------- TEXTO ---------- */
  --text-hi:        #FFFFFF;
  --text:           #EDE6D8;
  --text-mid:       #A89B84;
  --text-low:       #6E6553;
  --text-on-gold:   #241703;   /* texto sobre botão dourado — nunca branco */

  /* ---------- BORDAS ---------- */
  --line:           rgba(237, 185, 72, 0.14);
  --line-strong:    rgba(237, 185, 72, 0.34);
  --line-soft:      rgba(255, 255, 255, 0.06);

  /* ---------- RAIOS ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;   /* botões */
  --r-lg:   18px;   /* cards */
  --r-xl:   24px;   /* sheets, cards hero */
  --r-full: 999px;

  /* ---------- SOMBRAS E GLOW ---------- */
  --sh-card:    0 2px 10px rgba(0,0,0,.55);
  --sh-raised:  0 10px 28px rgba(0,0,0,.6);
  --sh-sheet:   0 -14px 44px rgba(0,0,0,.7);
  --glow-sm:    0 0 14px rgba(237,185,72,.22);
  --glow-md:    0 0 28px rgba(237,185,72,.30);
  --glow-lg:    0 0 56px rgba(237,185,72,.38);
  --glow-cta:   0 6px 22px rgba(210,150,33,.38), inset 0 1px 0 rgba(255,255,255,.45);

  /* ---------- TIPOGRAFIA ---------- */
  --ff-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-num:     'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-display: 40px;  --lh-display: 1.04;
  --fs-h1:      26px;  --lh-h1:      1.16;
  --fs-h2:      20px;  --lh-h2:      1.22;
  --fs-h3:      17px;  --lh-h3:      1.28;
  --fs-body:    15px;  --lh-body:    1.5;
  --fs-sm:      13px;  --lh-sm:      1.45;
  --fs-xs:      11px;  --lh-xs:      1.4;
  --fs-micro:   10px;  --lh-micro:   1.3;

  --fw-black:   900;
  --fw-bold:    700;
  --fw-semi:    600;
  --fw-med:     500;
  --fw-reg:     400;

  --ls-display: -0.02em;
  --ls-caps:    0.14em;   /* labels em caixa alta */

  /* ---------- ESPAÇAMENTO (escala de 4) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px;

  --gutter: 18px;            /* respiro lateral padrão das telas */
  --tabbar-h: 62px;
  --appbar-h: 56px;

  /* ---------- MOVIMENTO ---------- */
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;
  --dur-reveal: 900ms;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-in:   cubic-bezier(.55,.06,.68,.19);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);

  /* ---------- Z ---------- */
  --z-nav: 40; --z-appbar: 45; --z-sheet: 60; --z-modal: 70; --z-toast: 80;
}

/* A referência é dark-only por decisão de marca.
   Se o aparelho pedir light, mantemos o dark e apenas suavizamos o contraste
   do fundo — trocar para light destruiria a identidade "ouro sobre preto". */
@media (prefers-color-scheme: light) {
  :root { --bg-root: #0A0703; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms;
  }
}