/* ============================================================
   TN.CO — skins.css
   Carregue DEPOIS de tokens.css.
   Cada skin redefine SÓ VALORES. Nunca cria nome novo. Nunca usa !important.
   Aplique a classe no <body>. Sem classe, roda a skin padrão tnco-dark.
   ============================================================ */

/* ── HUB (painéis internos, hub.php) ─────────────────────── */
.skin-hub {
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans:    'Instrument Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --bg-base:     #050505;
  --bg-surface:  #0d0d0d;
  --bg-elevated: #141414;
  --bg-input:    #1a1a1a;

  --border:       rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.14);
  --border-focus: rgba(193, 80, 46, 0.50);

  --accent:       #C1502E;
  --accent-hover: #A23F22;
  --accent-dim:   rgba(193, 80, 46, 0.12);
  --accent-ink:   #FFFFFF;

  --text-1: #F0EEE8;
  --text-2: #A8A49A;
  --text-3: #8B857C;

  --section-pad: 48px;   /* painel interno respira menos que landing */
}

/* Hub em tema claro */
.skin-hub[data-theme="light"] {
  --bg-base:     #F5F4F0;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #F0EFEB;
  --bg-input:    #E8E7E3;

  --border:       rgba(0, 0, 0, 0.09);
  --border-hover: rgba(0, 0, 0, 0.18);

  --text-1: #17150F;
  --text-2: #55504A;
  --text-3: #7A736B;
}

/* ── CASA DO MENTOR (verde / creme / marrom) ─────────────── */
.skin-casa {
  --font-display: 'Clash Grotesk', system-ui, sans-serif;
  --font-sans:    'Clash Grotesk', system-ui, sans-serif;

  --bg-base:     #F7F6E4;   /* creme */
  --bg-surface:  #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-input:    #FFFFFF;

  --border:       rgba(118, 77, 49, 0.16);
  --border-hover: rgba(118, 77, 49, 0.32);
  --border-focus: rgba(36, 57, 40, 0.50);

  --accent:       #243928;   /* verde */
  --accent-hover: #1A2A1D;
  --accent-dim:   rgba(36, 57, 40, 0.10);
  --accent-ink:   #F7F6E4;

  /* O CTA da Casa do Mentor é laranja, para saltar tanto no creme quanto no verde.
     Tinta quase-preta sobre o laranja: branco reprova WCAG AA nessa cor. */
  --cta:       #FF6A1A;
  --cta-hover: #E25A10;
  --cta-ink:   #1A1004;

  /* Destaque da headline sobre o creme. O laranja da marca aqui dá 2.63:1 e
     reprova até como texto grande; escurecido dá 4.53:1 e mantém a família. */
  --destaque:  #C2490B;

  --text-1: #243928;
  --text-2: #764D31;         /* marrom */
  --text-3: rgba(118, 77, 49, 0.72);

  --shadow-md: 0 8px 32px rgba(36, 57, 40, 0.12);
}

/* Seção escura dentro da Casa do Mentor: inverte superfície e texto */
.skin-casa .section--dark {
  --bg-base:    #243928;
  --bg-surface: #1D2D21;
  --border:     rgba(247, 246, 228, 0.16);
  --accent:     #F7F6E4;
  --accent-hover: #FFFFFF;
  --accent-ink: #243928;
  /* Sobre o verde o laranja da marca dá 4.33:1 e passa como texto grande. */
  --destaque:   #FF6A1A;
  --text-1:     #F7F6E4;
  --text-2:     rgba(247, 246, 228, 0.80);
  --text-3:     rgba(247, 246, 228, 0.60);
  background: var(--bg-base);
  color: var(--text-1);
}

/* ── SAÚDE (vertical médicos) ────────────────────────────── */
.skin-saude {
  --bg-base:     #FFFFFF;
  --bg-surface:  #F0F5F2;
  --bg-elevated: #FFFFFF;
  --bg-input:    #FFFFFF;

  --border:       rgba(10, 66, 59, 0.14);
  --border-hover: rgba(10, 66, 59, 0.28);
  --border-focus: rgba(14, 92, 82, 0.50);

  --accent:       #0E5C52;   /* teal */
  --accent-hover: #0A423B;
  --accent-dim:   rgba(14, 92, 82, 0.10);
  --accent-ink:   #FFFFFF;

  --text-1: #0A423B;
  --text-2: #4A5C58;
  --text-3: #7A8A86;

  --shadow-md: 0 8px 32px rgba(10, 66, 59, 0.10);
}

/* ============================================================
   SKIN DE CLIENTE DA AGÊNCIA
   Duplique o bloco abaixo, troque o nome e os valores.
   Nunca crie arquivo novo com :root. Nunca use !important.
   ============================================================ */

/*
.skin-NOMEDOCLIENTE {
  --font-display: '...', serif;
  --font-sans:    '...', system-ui, sans-serif;

  --bg-base: #...;  --bg-surface: #...;  --bg-elevated: #...;  --bg-input: #...;
  --border: rgba(...);  --border-hover: rgba(...);  --border-focus: rgba(...);

  --accent: #...;  --accent-hover: #...;  --accent-dim: rgba(...);  --accent-ink: #...;

  --text-1: #...;  --text-2: #...;  --text-3: #...;
}
Antes de entregar: cheque 4.5:1 de contraste em --text-2 sobre --bg-base
e em --accent-ink sobre --accent.
*/