/* ==========================================================================
   DESIGN SYSTEM — tokens
   Valores padrão = tema do Club de referência (MVD). Tudo é sobrescrito em
   runtime pelo tema configurado no admin (/theme.css gerado pelo servidor).
   Componentes usam SÓ estas variáveis: trocar o tema = trocar variáveis.
   ========================================================================== */
:root {
  /* ---- Tema (equivale aos 12 campos de "Preferências e Cores") ---- */
  --bg: #0d0d0d;
  --text: #ffffff;
  --menu: #141414;            /* topo, sidebar, seções/cartões */
  --menu-text: #ffffff;
  --accent: #aaff01;          /* destaque principal */
  --accent-2: #aaff01;        /* 2ª cor do degradê */
  --hover: #aaff01;           /* texto/ícone em hover e item ativo */
  --btn: #aaff01;             /* botão primário */
  --btn-text: #0d0d0d;
  --accent-text: #0d0d0d;     /* texto sobre o destaque (calculado) */
  --login-bg: #050505;
  --login-form: #101010;
  --login-text: #ffffff;
  --login-btn: #aaff01;
  --login-btn-text: #0d0d0d;

  /* ---- Superfícies translúcidas (branco no escuro / preto no claro) ---- */
  --surface-rgb: 255, 255, 255;
  --s1: rgba(var(--surface-rgb), .05);
  --s2: rgba(var(--surface-rgb), .10);
  --s3: rgba(var(--surface-rgb), .18);
  --hair: rgba(var(--surface-rgb), .08);
  --scrim: rgba(0, 0, 0, .65);

  /* ---- Texto secundário (derivado do texto do tema) ---- */
  --text-80: color-mix(in srgb, var(--text) 80%, transparent);
  --text-60: color-mix(in srgb, var(--text) 60%, transparent);
  --text-40: color-mix(in srgb, var(--text) 40%, transparent);

  /* ---- Estados ---- */
  --success: #8bc32f;
  --danger: #e64b3c;
  --warning: #ffc24b;
  --info: #4aa8ff;

  /* ---- Tipografia ---- */
  --font: "Nunito Sans", Montserrat, Helvetica, Arial, sans-serif;
  --fs-2xs: 10px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px;
  --fs-base: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  /* ---- Forma ---- */
  --radius: 10px;             /* cartões e seções (configurável) */
  --radius-sm: 6px;
  --radius-md: 8px;           /* campos */
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Profundidade ---- */
  --shadow-header: 0 3px 9px rgba(0, 0, 0, .4);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, .55);
  --glow: color-mix(in srgb, var(--accent) 14%, transparent);
  --shadow-card-hover: 0 10px 40px 0 var(--glow);

  /* ---- Espaçamento ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --sp-7: 40px;

  /* ---- Movimento ---- */
  --ease: ease-in-out;
  --t-fast: .15s; --t: .2s; --t-slow: .4s;

  /* ---- Layout ---- */
  --header-h: 60px;
  --sidebar-w: 256px;
  --rail-w: 80px;
  --bottom-nav-h: 64px;
  --progress-h: 7px;
  --content-max: 1600px;

  /* ---- Carrossel de cursos (medidas observadas na Astron) ---- */
  --car-slide-w: 240px;
  --car-card-w: 237px;
  --car-card-h: 500px;
  --car-h-w: 260px;           /* capa horizontal */
  --car-h-h: 146px;
}