/* =====================================================================
   EX OPTION — Design System / Design Tokens
   Base estrutural: IQ Option (Suisse Intl + superfícies premium)
   Marca: DOURADO oficial Ex Option (#FFBE01)
   Tema padrão: DARK (:root)  ·  Tema claro: body.theme-light
   ===================================================================== */

/* ----------------------------------------------------------------
   1. TEMA ESCURO (padrão) — :root
   ---------------------------------------------------------------- */
:root {
  /* Tipografia */
  --main-font: "Suisse Intl", "Inter", Arial, sans-serif;
  --golos-text: "Golos Text", "Inter", Arial, sans-serif;

  /* --- Superfícies / Fill (preto quente premium — realça o dourado) --- */
  --Fill-00-default: #0e0a0a;
  --Fill-0-default:  #1a1714;   /* fundo base */
  --Fill-0-alpha0:   #1a171400;
  --Fill-0-alpha70:  #1a1714b3;
  --Fill-0-hover:    #241f1b;
  --Fill-0-pressed:  #2c2620;
  --Fill-1-default:  #241f1b;   /* card / seção */
  --Fill-1-alpha0:   #241f1b00;
  --Fill-1-hover:    #2c2620;
  --Fill-1-pressed:  #362f28;
  --Fill-2-default:  #362f28;   /* botão secundário */
  --Fill-2-hover:    #3f372f;
  --Fill-2-pressed:  #463d33;
  --Fill-3-default:  #3f372f;
  --Fill-3-hover:    #4a4137;
  --Fill-3-pressed:  #4f453a;
  --Fill-4-default:  #463d33;

  /* --- Marca (Brand) DOURADO — oficial Ex Option #FFBE01 --- */
  --Fill-Brand-default:  #ffbe01;
  --Fill-Brand-hover:    #ffcb33;
  --Fill-Brand-pressed:  #e6a900;
  --Fill-Brand-gradient-200:  #ff8f00;
  --Fill-Brand-gradient-300:  #ffa800;
  --Fill-Brand-gradient-400:  #ffb300;
  --Fill-Brand-gradient-500:  #ffbe01;
  --Fill-Brand-gradient-600:  #ffce47;
  --Fill-Brand-gradient-700:  #ffd250;
  --Fill-Brand-gradient-1000: #fff0c2;
  --Fill-BrandS20-default: #423306;
  --Fill-BrandS20-hover:   #5c4500;
  --Fill-BrandS20-pressed: #6e5300;

  /* --- Fill neutros --- */
  --Fill-Primary-default:   #eceae9;
  --Fill-Primary-alpha-5:   rgba(236, 234, 233, .05);
  --Fill-Secondary-default: #afadac;
  --Fill-Secondary-hover:   #eceae9;
  --Fill-Secondary-pressed: #ffffff;
  --Fill-Tertiary-default:  #827e7d;
  --Fill-OnAccent: #1a1714;            /* texto sobre dourado = escuro (legível) */
  --Fill-00-alpha0: rgba(14, 10, 10, 0);

  /* --- Texto --- */
  --Text-Primary:   #f2f0ee;
  --Text-Secondary-default: #b3afac;
  --Text-Secondary-hover:   #f2f0ee;
  --Text-Secondary-pressed: #ffffff;
  --Text-Tertiary:  #847f7b;
  --Text-Quaternary:#6d6863;
  --Text-OnAccent:  #1a1714;           /* sobre botão dourado */
  --Text-Brand-Primary-default: #ffbe01;
  --Text-Brand-Primary-hover:   #ffcb33;
  --Text-Brand-Primary-pressed: #e6a900;
  --Text-Positive-Primary: #5ddf38;
  --Text-Negative-Primary: #ff4747;

  /* --- Logo --- */
  --Logo-Primary: #fff;
  --Logo-Brand:   #ffbe01;

  /* --- Gradiente de marca (mesmo ângulo 103° do original) --- */
  --gradient-brand-default: linear-gradient(
    103deg,
    var(--Fill-Brand-gradient-600) .37%,
    var(--Fill-Brand-gradient-500) 15.31%,
    var(--Fill-Brand-gradient-200) 100%
  );
  /* brilho dourado para destaques premium */
  --gradient-brand-shine: linear-gradient(
    103deg, #fff0c2 0%, #ffd250 30%, #ffbe01 55%, #ff8f00 100%
  );
  --glow-brand: 0 0 0 0 rgba(255,190,1,.0);
  --glow-brand-strong: 0 8px 40px -8px rgba(255,190,1,.45);

  /* ----------------------------------------------------------------
     ESCALAS GLOBAIS
     ---------------------------------------------------------------- */
  --mobS:  393px;  --mobL: 480px;  --tabM: 720px;
  --deskS: 1024px; --deskL: 1366px; --deskXl: 1440px;

  --content-padding: 24px;
  --border-radius: 26px;

  /* Escala tipográfica */
  --fs-8:  8px;  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px;
  --fs-14:14px;  --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px;
  --fs-24:24px;  --fs-26:26px; --fs-28:28px; --fs-30:30px; --fs-32:32px;
  --fs-36:36px;  --fs-40:40px; --fs-44:44px; --fs-48:48px; --fs-56:56px;
  --fs-64:64px;  --fs-72:72px; --fs-88:88px;

  /* Pesos Suisse Intl */
  --fw-book:400; --fw-regular:450; --fw-medium:500; --fw-semibold:600;

  /* Raios */
  --radius-2:2px; --radius-4:4px; --radius-6:6px; --radius-8:8px;
  --radius-10:10px; --radius-12:12px; --radius-14:14px; --radius-16:16px;
  --radius-20:20px; --radius-24:24px; --radius-26:26px; --radius-32:32px;
  --radius-40:40px; --radius-56:56px; --radius-80:80px;
  --radius-pill:1000px; --radius-circle:50%;

  /* Espaçamento base 4 */
  --space-2:2px; --space-4:4px; --space-6:6px; --space-8:8px;
  --space-12:12px; --space-16:16px; --space-20:20px; --space-24:24px;
  --space-32:32px; --space-40:40px; --space-56:56px; --space-72:72px;
  --space-88:88px; --space-120:120px; --space-176:176px;

  /* --- Curvas e durações de animação (extraídas do original) --- */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur-fast:   .2s;
  --dur-base:   .3s;
  --dur-slow:   .5s;
}

/* ----------------------------------------------------------------
   2. TEMA CLARO — body.theme-light
   ---------------------------------------------------------------- */
body.theme-light {
  --Fill-0-default: #ffffff;
  --Fill-0-alpha0:  #f7f5f000;
  --Fill-0-alpha70: #f7f5f0b3;
  --Fill-0-hover:   #faf8f3;
  --Fill-0-pressed: #f1efe9;
  --Fill-1-default: #faf8f3;
  --Fill-1-alpha0:  #efece400;
  --Fill-1-hover:   #f1efe9;
  --Fill-1-pressed: #e9e6df;
  --Fill-2-default: #e9e6df;
  --Fill-2-hover:   #e1ddd5;
  --Fill-2-pressed: #d8d3c9;
  --Fill-3-default: #e1ddd5;
  --Fill-3-hover:   #ccc6ba;
  --Fill-3-pressed: #b0a99c;
  --Fill-4-default: #d8d3c9;

  --Fill-Brand-default:  #f0a800;   /* dourado mais profundo p/ contraste em branco */
  --Fill-Brand-hover:    #e09b00;
  --Fill-Brand-pressed:  #c98a00;
  --Fill-Brand-gradient-200: #cc7a00;
  --Fill-Brand-gradient-300: #e08a00;
  --Fill-Brand-gradient-400: #f0a800;
  --Fill-Brand-gradient-500: #ffba00;
  --Fill-Brand-gradient-600: #ffce47;
  --Fill-Brand-gradient-700: #ffdd7a;
  --Fill-Brand-gradient-1000:#fff0c2;
  --Fill-BrandS20-default: #FFE8A8;
  --Fill-BrandS20-hover:   #FFDD85;
  --Fill-BrandS20-pressed: #FFD36B;

  --Fill-Primary-default:   #2b2926;
  --Fill-Secondary-default: #4a4844;
  --Fill-Secondary-hover:   #2b2926;
  --Fill-Secondary-pressed: #000000;
  --Fill-Tertiary-default:  #6f6b66;
  --Fill-OnAccent: #1a1714;

  --Text-Primary:   #2b2926;
  --Text-Secondary-default: #4a4844;
  --Text-Secondary-hover:   #2b2926;
  --Text-Secondary-pressed: #000000;
  --Text-Tertiary:  #6f6b66;
  --Text-Quaternary:#8a857f;
  --Text-OnAccent:  #1a1714;
  --Text-Brand-Primary-default: #c98a00;  /* dourado escuro legível em branco */
  --Text-Brand-Primary-hover:   #b07800;
  --Text-Brand-Primary-pressed: #996800;
  --Text-Positive-Primary: #2f9d0c;
  --Text-Negative-Primary: #e53935;

  --Logo-Primary: #1a1714;
  --Logo-Brand:   #f0a800;

  --glow-brand-strong: 0 8px 40px -8px rgba(240,168,0,.35);
}

/* ----------------------------------------------------------------
   3. PADDING DE CONTEÚDO RESPONSIVO
   ---------------------------------------------------------------- */
@media screen and (min-width: 720px)  { html, body { --content-padding: 32px; } }
@media screen and (min-width: 1366px) { html, body { --content-padding: 40px; } }
@media screen and (min-width: 1440px) { html, body { --content-padding: 56px; } }