/* Choose The Music — tokens de cor (regra 9). Único arquivo CSS onde vale ter uma cor literal
   (#hex ou rgb/rgba): verificar_views.py exclui só este arquivo da contagem de cor-literal, então todo
   valor novo entra aqui, nomeado, e o resto do CSS só referencia var(--ctm-...).

   Criado na f10.6a (Views/Teacher/*). Na f10.6c a base de cor "clássica" (--ctm-primary, --ctm-surface,
   --ctm-text etc.) saiu do :root de site.css e passou a morar aqui -- site.css agora DEPENDE deste
   arquivo carregar antes dele em toda página (por isso _AdminLayout.cshtml passou a linkar tokens.css,
   que antes só o _Layout.cshtml público carregava). */

:root {
  /* ============================================================
     Base (movida de site.css na f10.6c -- mesmo nome, mesmo valor)
     ============================================================ */

  /* Marca */
  --ctm-primary: #4f46e5;
  --ctm-primary-rgb: 79, 70, 229;
  --ctm-primary-strong: #3730a3;
  --ctm-primary-soft: #eef0ff;
  --ctm-violet: #7c3aed;
  --ctm-accent: #f59e0b;
  --ctm-accent-soft: #fff4dc;
  --ctm-heart: #be123c;
  --ctm-heart-soft: #ffe4ea;
  /* f10.8 (regra 9, acessibilidade): --ctm-teal era #0d9488 -- branco sobre ele media 3,74:1 e o
     próprio teal como texto sobre branco media 3,74:1 (abaixo de 4,5:1). Decisão do dono: escurecer
     para #0f766e (mesma família; branco sobre ele = 5,47:1; e como texto sobre claro passa também) --
     mesmo valor usado no kit (docs/mockups/html/tokens.css, paleta B) e no --ctm-teal-strong (hover)
     antigo, que por isso desceu para #0f5f58 (= --marca-esc da paleta B do kit) para continuar mais
     escuro que o normal. */
  --ctm-teal: #0f766e;
  --ctm-teal-rgb: 15, 118, 110;
  --ctm-teal-soft: #e3f6f3;
  /* f10.8: teal como TEXTO sobre fundo escuro (backoffice) precisa do tom claro da paleta B escura do
     kit (--marca do modo escuro), senão a marca escurecida acima (#0f766e) fica ainda mais ilegível
     sobre #1e293b/#212529. Usado só dentro de body.admin-body (admin.css sobrescreve --ctm-teal). */
  --ctm-teal-dark: #5edbc9;
  --ctm-success: #059669;
  --ctm-success-soft: #e3f7ee;

  /* f10.6c: triplas RGB novas (não existiam em site.css) -- precisam compor rgba() em admin.css,
     paginas/teacher-leads.css etc. sem escrever cor literal fora deste arquivo. */
  --ctm-violet-rgb: 124, 58, 237;
  --ctm-accent-rgb: 245, 158, 11;
  --ctm-success-rgb: 5, 150, 105;

  /* Superfícies e texto */
  --ctm-bg: #f6f6fb;
  --ctm-surface: #ffffff;
  --ctm-surface-2: #f1f1f8;
  --ctm-border: #e6e6f0;
  --ctm-text: #1c1a3a;
  /* f10.8 (rodada 2): era #6b6a85 -- sobre #e2e3e5 (badge .bg-secondary-subtle) media 4,06:1,
     abaixo de 4,5:1 (a maioria dos fundos claros já passava, mas com pouca margem). Escurecido um
     pouco só o suficiente (mesma família, quase imperceptível ao lado do valor antigo). */
  --ctm-text-muted: #5c5b73;
  /* f10.8: --ctm-text-muted sobre fundo escuro (backoffice: #1e293b/#212529/#0f172a) media
     2,8:1/2,95:1/3,42:1 -- abaixo de 4,5:1. Tom claro (mesmo --txt-s do modo escuro do kit),
     usado só dentro de body.admin-body (admin.css sobrescreve --ctm-text-muted). */
  --ctm-text-muted-dark: #a6a5c0;

  /* f10.8: anel de foco visível (regra 9/12) em .btn/link/.form-control/.form-select/.nav-link.
     Contraste ≥ 3:1 sobre --ctm-bg/--ctm-surface (claro); body.admin-body sobrescreve para o escuro. */
  --ctm-focus-ring: var(--ctm-primary-strong);

  /* f10.8: cores do Bootstrap ainda não cobertas por um token --ctm-* (regra 9) mediam abaixo de
     4,5:1 sobre --ctm-bg/--ctm-surface: #6c757d (--bs-secondary, ex. .btn-outline-secondary) a
     4,35:1, #198754 (--bs-success, .text-success) a 4,2:1/4,02:1, #dc3545 (--bs-danger, .bg-danger)
     a 3,93:1. Tons mais escuros da mesma família, só o suficiente para passar. */
  --ctm-gray-secondary: #5c636a;
  --ctm-gray-secondary-rgb: 92, 99, 106;
  /* f10.8 (rodada 2): .btn-outline-secondary do Bootstrap tem #6c757d GRAVADO como literal em
     --bs-btn-color/--bs-btn-border-color (bootstrap.css, não referencia --bs-secondary) -- por isso
     sobrescrever --bs-secondary não mudava nada aqui. site.css redefine o componente direto,
     lendo este token; body.admin-body troca para um tom claro (--ctm-text-muted-dark), porque
     --ctm-gray-secondary (escuro) não passa sobre os fundos escuros do backoffice. */
  --ctm-outline-secondary-color: var(--ctm-gray-secondary);
  /* Texto do .btn-outline-secondary preenchido (hover/ativo); escuro no backoffice. */
  --ctm-outline-secondary-on: var(--ctm-surface);
  /* f10.8 (rodada 2): --bs-success escurecido (acima) para passar sobre claro cai para 2,66:1
     sobre o fundo escuro do backoffice (kpi-value) -- tom claro, só dentro de body.admin-body. */
  --ctm-success-dark: #34d399;
  --ctm-success-dark-rgb: 52, 211, 153;

  /* Alvo de toque mínimo no celular (regra 9/12) -- mesmo valor do kit (docs/mockups/html/tokens.css,
     --alvo-min). Usado só dentro do breakpoint do celular (site.css). */
  --ctm-touch-min: 48px;

  /* Forma */
  --ctm-radius-sm: 10px;
  --ctm-radius: 16px;
  --ctm-radius-lg: 24px;
  --ctm-shadow-sm: 0 1px 2px rgba(28, 26, 58, .06);
  --ctm-shadow: 0 6px 20px rgba(28, 26, 58, .07);
  --ctm-shadow-lg: 0 18px 40px rgba(79, 70, 229, .18);

  /* Tipografia */
  --ctm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ctm-font-display: "Plus Jakarta Sans", var(--ctm-font);

  --ctm-gradient: linear-gradient(135deg, var(--ctm-primary) 0%, var(--ctm-violet) 100%);
  --ctm-gradient-teal: linear-gradient(135deg, var(--ctm-teal) 0%, #0891b2 100%);

  /* Bootstrap -- ATENÇÃO (defeito da f10.6b): site.css redefine variáveis do Bootstrap. --bs-info
     aqui é o teal da marca, NÃO o ciano padrão do Bootstrap (esse é --ctm-cyan, abaixo). */
  --bs-primary: var(--ctm-primary);
  --bs-primary-rgb: var(--ctm-primary-rgb);
  --bs-link-color: var(--ctm-primary);
  --bs-link-color-rgb: var(--ctm-primary-rgb);
  --bs-link-hover-color: var(--ctm-primary-strong);
  --bs-link-hover-color-rgb: 55, 48, 163;
  --bs-body-font-family: var(--ctm-font);
  --bs-body-color: var(--ctm-text);
  --bs-body-bg: var(--ctm-bg);
  --bs-secondary-color: var(--ctm-text-muted);
  --bs-border-color: var(--ctm-border);
  --bs-border-radius: var(--ctm-radius-sm);
  --bs-border-radius-lg: var(--ctm-radius);
  --bs-border-radius-xl: var(--ctm-radius-lg);
  --bs-info: var(--ctm-teal);
  --bs-info-rgb: var(--ctm-teal-rgb);
  --bs-primary-bg-subtle: var(--ctm-primary-soft);
  --bs-primary-text-emphasis: var(--ctm-primary-strong);
  --bs-info-bg-subtle: var(--ctm-teal-soft);
  --bs-info-text-emphasis: var(--ctm-teal-ink);
  /* f10.8: tons padrão do Bootstrap ainda não cobertos por um --ctm-* (ver --ctm-gray-secondary
     acima) -- .btn-outline-secondary, .text-success, .bg-danger etc. mediam abaixo de 4,5:1. */
  --bs-secondary: var(--ctm-gray-secondary);
  --bs-secondary-rgb: var(--ctm-gray-secondary-rgb);
  --bs-success: var(--ctm-emerald-700);
  --bs-success-rgb: 4, 120, 87;
  --bs-danger: #b02a37;
  --bs-danger-rgb: 176, 42, 55;

  /* ============================================================
     f10.6a (Views/Teacher/*)
     ============================================================ */
  --ctm-nav-tab-text: #4b5563;
  --ctm-border-dashed: #cbd5e1;
  --ctm-shadow-tab-active: 0 4px 12px rgba(var(--ctm-primary-rgb), .25);
  --ctm-indigo-950: #1e1b4b;
  --ctm-indigo-900: #312e81;
  --ctm-violet-900: #4c1d95;
  --ctm-slate-900: #0f172a;
  --ctm-border-on-dark: rgba(255, 255, 255, .1);
  --ctm-shadow-badge: 0 2px 4px rgba(0, 0, 0, .15);

  /* ============================================================
     f10.6b (Views/Student/*)
     ============================================================ */
  --ctm-indigo-500: #6366f1;
  --ctm-fuchsia-500: #d946ef;
  --ctm-slate-800: #1e293b;
  --ctm-slate-700: #334155;
  --ctm-violet-950-hero: #311b92;
  --ctm-purple-600-rgb: 147, 51, 234;
  --ctm-bs-orange-rgb: 253, 126, 20;
  --ctm-white-08: rgba(255, 255, 255, .08);
  --ctm-white-12: rgba(255, 255, 255, .12);
  --ctm-white-15: rgba(255, 255, 255, .15);
  --ctm-shadow-hero-dark: 0 20px 40px rgba(0, 0, 0, .3);
  --ctm-primary-12: rgba(var(--ctm-primary-rgb), .12);
  --ctm-purple-600-12: rgba(var(--ctm-purple-600-rgb), .12);
  --ctm-warning-12: rgba(var(--bs-warning-rgb), .12);
  --ctm-warning-2: rgba(var(--bs-warning-rgb), .2);
  --ctm-warning-3: rgba(var(--bs-warning-rgb), .3);
  --ctm-warning-35: rgba(var(--bs-warning-rgb), .35);
  --ctm-orange-12: rgba(var(--ctm-bs-orange-rgb), .12);
  --ctm-cyan: #0dcaf0;
  --ctm-cyan-rgb: 13, 202, 240;
  --ctm-info-1: rgba(var(--ctm-cyan-rgb), .1);
  --ctm-info-15: rgba(var(--ctm-cyan-rgb), .15);
  --ctm-info-25: rgba(var(--ctm-cyan-rgb), .25);

  /* ============================================================
     f10.6c (site.css, público, cobrança, admin, compartilhados)
     ============================================================ */

  /* -- site.css: cores que só existiam fora do :root (Bootstrap overrides, navbar, botões, cartões) -- */
  --ctm-teal-strong: #0f5f58;                /* f10.8: hover de .btn-info -- desceu de #0f766e (agora
                                                 é --ctm-teal normal) para continuar mais escuro;
                                                 = --marca-esc da paleta B escura do kit. */
  --ctm-accent-ink: #3b2a00;                /* texto de .btn-accent */
  --ctm-accent-strong: #eab308;             /* hover de .btn-accent */
  --ctm-accent-emphasis: #b45309;           /* ícone/posição sobre --ctm-accent-soft (stat-icon, 1º do ranking) */
  --ctm-pill-accent-ink: #92400e;           /* texto de .ctm-pill.is-accent, tom herdado distinto do acima */
  --ctm-pill-success-ink: #065f46;          /* texto de .ctm-pill.is-success */
  --ctm-teal-ink: #115e59;                  /* texto de .ctm-pill.is-teal e --bs-info-text-emphasis */
  --ctm-yt-bg: #0f0e1f;                     /* fundo do player antes da miniatura carregar (.ctm-yt) */
  --ctm-violet-500: #8b5cf6;                /* ícone de .ctm-auth-icon.is-violet (Login) */
  --ctm-violet-15: rgba(var(--ctm-violet-rgb), .15);   /* fundo de .ctm-auth-icon.is-violet */
  --ctm-primary-18: rgba(var(--ctm-primary-rgb), .18); /* ::selection */
  --ctm-primary-40: rgba(var(--ctm-primary-rgb), .4);  /* borda de .ctm-card-highlight (billing.css) */
  --ctm-primary-25: rgba(var(--ctm-primary-rgb), .25); /* foco de campo; sombra da navbar */
  --ctm-primary-45: rgba(var(--ctm-primary-rgb), .45); /* borda de .btn-outline-primary */
  --ctm-primary-50: rgba(var(--ctm-primary-rgb), .5);  /* ícone de .ctm-empty */
  --ctm-primary-55: rgba(var(--ctm-primary-rgb), .55); /* borda de .ctm-rank-item.is-mine */
  --ctm-primary-60: rgba(var(--ctm-primary-rgb), .6);  /* borda de foco */
  --ctm-white-14: rgba(255, 255, 255, .14);  /* .btn-light-on-dark; select da navbar */
  --ctm-white-18: rgba(255, 255, 255, .18);  /* logo da navbar */
  --ctm-white-28: rgba(255, 255, 255, .28);  /* borda de .btn-light-on-dark */
  --ctm-white-30: rgba(255, 255, 255, .3);   /* borda do select da navbar */
  --ctm-white-85: rgba(255, 255, 255, .85);  /* texto do lead do hero da landing */
  --ctm-white-92: rgba(255, 255, 255, .92);  /* botão de play do .ctm-yt */
  --ctm-shadow-bottom-nav: 0 -6px 20px rgba(28, 26, 58, .06); /* .mobile-bottom-nav */
  --ctm-shadow-yt-play: 0 8px 24px rgba(0, 0, 0, .3);         /* .ctm-yt-play */
  --ctm-gradient-yt-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45) 100%);

  /* -- Home/Teachers.cshtml e Home/Instruments.cshtml (hero público) -- */
  --ctm-primary-15: rgba(var(--ctm-primary-rgb), .15);
  --ctm-purple-600-15: rgba(var(--ctm-purple-600-rgb), .15);

  /* -- Billing/Plans.cshtml (cartão Pro Max em destaque) -- */
  --ctm-amber-100-rgb: 254, 243, 199;
  --ctm-amber-100-20: rgba(var(--ctm-amber-100-rgb), .2);

  /* -- Backoffice (_AdminLayout.cshtml, Admin/Dashboard.cshtml, TeacherLeads/Leads.cshtml) -- */
  --ctm-amber-600: #d97706;                 /* hover do accent no admin; status "Interessado" do CRM */
  --ctm-slate-50: #f8fafc;                  /* texto principal do backoffice (--admin-text) */
  --ctm-slate-400: #94a3b8;                 /* texto secundário do backoffice (--admin-muted) */
  --ctm-admin-sidebar-bg: #090d16;          /* fundo da barra lateral do backoffice (mais escuro que --ctm-slate-900) */
  --ctm-black: #000;                        /* texto do selo "PRO" do backoffice (.badge-pro) */
  --ctm-gray-500: #6b7280;                  /* status "Desistiu" do CRM de leads */
  --ctm-emerald-700: #047857;               /* 3º tom do banner do CRM de leads */
  --ctm-accent-12: rgba(var(--ctm-accent-rgb), .12);  /* KPI "Interessados" do CRM; ícone do admin */
  --ctm-accent-15: rgba(var(--ctm-accent-rgb), .15);  /* hover do menu do backoffice */
  --ctm-teal-12: rgba(var(--ctm-teal-rgb), .12);      /* KPI "Novos" do CRM de leads */
  --ctm-teal-35: rgba(var(--ctm-teal-rgb), .35);      /* f11.13: anel de foco do radio da faixa etária (aluno) */
  --ctm-success-12: rgba(var(--ctm-success-rgb), .12); /* KPI "Convertidos"/estado vazio do CRM */
  --ctm-shadow-admin-card: 0 4px 6px -1px rgba(0, 0, 0, .3);
  --ctm-gradient-badge-pro: linear-gradient(135deg, var(--ctm-accent), var(--ctm-amber-600));

  /* -- _Avatar.cshtml: paleta fixa de fundo do círculo de iniciais (sem foto), 10 tons por índice de
     hash do nome -- vira classe .ctm-avatar-cor-0..9 em vez de style="background-color:...". -- */
  --ctm-avatar-0: #0d6efd;
  --ctm-avatar-1: #6610f2;
  --ctm-avatar-2: #6f42c1;
  --ctm-avatar-3: #d63384;
  --ctm-avatar-4: #dc3545;
  /* f10.18 (#198): laranja #fd7e14 media 2,57:1 com iniciais brancas (axe color-contrast, mobile Lighthouse);
     #c2410c da mesma familia mede 5,18:1. */
  --ctm-avatar-5: #c2410c;
  --ctm-avatar-6: #198754;
  /* f10.8: brancas das iniciais sobre --ctm-avatar-7/-8 mediam 2,12:1 e 1,95:1 (bem abaixo de
     4,5:1) -- tons mais escuros da mesma família (mesmo índice de hash, resto da paleta intacto). */
  --ctm-avatar-7: #15803d;
  --ctm-avatar-8: #0369a1;
  --ctm-avatar-9: #495057;
}

/* .bg-primary/.bg-info da marca (Bootstrap usa o azul/ciano padrão). A regra mora aqui, e não num token do :root,
   porque --bs-bg-opacity é resolvida POR ELEMENTO (.bg-opacity-10 etc.): um token calculado no :root congelaria a
   opacidade em 1 (defeito achado na f10.6c). É o único seletor fora do :root neste arquivo. */
.bg-primary { background-color: rgba(var(--ctm-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-info { background-color: rgba(var(--ctm-teal-rgb), var(--bs-bg-opacity, 1)) !important; }

/* ============================================================
   f13.8 (D-71, kit 65): o tema da pagina de acompanhamento do lancamento. A pagina publica que o inscrito abre segue a LANDING do lancamento: escura,
   com amarelo de destaque, em qualquer modo do app (como o QR e a arte, nao inverte). Cada --ctm-launch-* tem o MESMO valor do --lc-* do kit
   (docs/mockups/html/tokens.css, bloco 5), 1 para 1. O amarelo e o --ctm-launch-destaque, NAO o --ctm-accent do app (aquele e o ambar do Pro). Pares de texto
   conferidos em 4,5:1 ou mais sobre o fundo em que aparecem. So acompanhar-lancamento.css le estes tokens.
   ============================================================ */
:root {
  --ctm-launch-fundo:#0B1033; --ctm-launch-fundo-2:#121847; --ctm-launch-cartao:#161C52; --ctm-launch-cartao-2:#1C2360;
  --ctm-launch-brilho:#243086;
  --ctm-launch-linha:#2B3380;
  --ctm-launch-txt:#EEF0FF; --ctm-launch-txt-s:#A9B0E0;
  --ctm-launch-destaque:#FFC107; --ctm-launch-destaque-sobre:#1A1500; --ctm-launch-destaque-12:rgba(255,193,7,.14); --ctm-launch-destaque-16:rgba(255,193,7,.16);
  --ctm-launch-ok:#2ECC8F; --ctm-launch-ok-sobre:#04281B;
  --ctm-launch-info:#4C8DFF; --ctm-launch-info-sobre:#06142F; --ctm-launch-info-halo:rgba(76,141,255,.35); --ctm-launch-info-12:rgba(76,141,255,.12); --ctm-launch-info-fundo:#1B2A7A;
  --ctm-launch-ao-vivo:#FF4D5E; --ctm-launch-ao-vivo-sobre:#2A0008; --ctm-launch-ao-vivo-halo:rgba(255,77,94,.35);
  --ctm-launch-vidro:rgba(255,255,255,.06); --ctm-launch-vidro-forte:rgba(255,255,255,.12);
  --ctm-launch-veu:rgba(8,12,40,.85); --ctm-launch-sombra:rgba(0,0,0,.45);
  --ctm-launch-miniatura-1:#3A2F9A; --ctm-launch-miniatura-2:#16206B; --ctm-launch-miniatura-3:#0D1450;
  --ctm-launch-fonte:"Oswald", var(--ctm-font-display);
}