/* =============================================================
   TAAS — Colors & Type
   PLACEHOLDER NEUTRO FENICE
   Brand system (provisório) by Fenice Lab · 2026
   -------------------------------------------------------------
   ⚠️ ATENÇÃO: a Taas AINDA NÃO tem identidade visual/marca
   definida. Esta paleta é um PLACEHOLDER NEUTRO da Fenice Lab —
   tons terrosos claros e profissionais, com um único acento
   terracota — usado só para o portal não ficar quebrado até a
   Taas ganhar a sua própria identidade.

   Quando a marca da Taas for decifrada, basta TROCAR OS VALORES
   destes mesmos custom properties (os NOMES não mudam), e o
   index.html + formulario.html continuam funcionando sem ajuste.
   -------------------------------------------------------------
   FONTS: Google Fonts gratuitas (padrão Fenice). Carregar uma
   vez em qualquer documento:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   ============================================================= */

:root {
  /* ---- PRIMARY ----------------------------------------------- */
  --marinho:       #2A211C;   /* Caffè — texto/base escura            */
  --azul-quality:  #4A3D34;   /* Marrom Médio — assinatura/títulos    */
  --branco:        #FFFFFF;   /* Branco Puro — texto sobre escuro / superfícies */

  /* ---- SECONDARY --------------------------------------------- */
  --ciano:         #CC7A4D;   /* Terracota Fenice — acento / voz da marca */
  --ciano-dk:      #B25E33;   /* Terracota Profundo — hover, bordas ativas */
  --marinho-md:    #6B5B4E;   /* Marrom Suave — camadas/cards          */
  --marinho-dk:    #2A211C;   /* Caffè Escuro — fundos escuros, rodapés */

  /* ---- SUPPORT / NEUTROS TERROSOS --------------------------- */
  --menta:         #F3ECE2;   /* Areia Clara — início do gradiente     */
  --aqua-pastel:   #E6DAC8;   /* Areia — meio-tom                       */
  --ceu:           #E6DAC8;   /* Areia — leveza                         */
  --ceu-soft:      #F3ECE2;   /* Areia Clara Suave — fim do gradiente / fundo claro */
  --cinza-agua:    #8A7A6C;   /* Cinza Terra — texto secundário        */

  /* ---- GRADIENTES (placeholder) ----------------------------- */
  --grad-agua:     linear-gradient(135deg, #F3ECE2 0%, #E6DAC8 100%);   /* fundo claro */
  --grad-marca:    linear-gradient(135deg, #CC7A4D 0%, #B25E33 100%);   /* CTA / destaque */
  --grad-profundo: linear-gradient(180deg, #2A211C 0%, #160F0B 100%);

  /* ---- SEMANTIC TOKENS --------------------------------------- */
  --bg:            #FFFFFF;
  --bg-alt:        #FAF6F1;            /* fundo claro suave                       */
  --surface:       #FFFFFF;
  --surface-2:     #FAF6F1;
  --border:        #E6DAC8;
  --border-strong: #CC7A4D;

  --fg:            #2A211C;            /* texto principal sobre claro             */
  --fg-1:          #4A3D34;            /* corpo de texto                          */
  --fg-2:          #8A7A6C;            /* legendas / mutado                       */
  --fg-on-dark:    #FFFFFF;            /* texto sobre fundo escuro                */
  --accent:        #CC7A4D;            /* terracota — a voz da marca              */
  --accent-deep:   #B25E33;
  --link:          #B25E33;

  /* ---- TYPE FAMILIES ----------------------------------------- */
  --font-display:  'Fraunces', Georgia, serif;            /* títulos / headlines */
  --font-body:     'Inter', system-ui, sans-serif;        /* UI + corpo          */

  /* ---- TYPE SCALE (digital, px) ------------------------------ */
  --fs-hero:   80px;   /* hero de campanha      */
  --fs-h1:     48px;   /* títulos de página     */
  --fs-h2:     32px;   /* subtítulos de seção   */
  --fs-h3:     22px;   /* destaques menores     */
  --fs-body:   16px;   /* texto corrido         */
  --fs-sm:     14px;   /* secundário            */
  --fs-caption:12px;   /* horários, endereço    */

  --lh-tight:  1.0;
  --lh-snug:   1.18;
  --lh-body:   1.7;

  --tracking-display: 0.005em;
  --tracking-label:   0.22em;

  /* ---- RADII (formas suaves) --------------------------------- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---- SPACING (8pt base) ------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- ELEVATION (sombras tom terra) ------------------------- */
  --shadow-sm: 0 1px 3px rgba(42,33,28,.10);
  --shadow-md: 0 8px 24px rgba(42,33,28,.12);
  --shadow-lg: 0 18px 50px rgba(42,33,28,.18);
  --glow-ciano: 0 0 24px rgba(204,122,77,.40);   /* brilho terracota */
}

/* =============================================================
   ELEMENTOS SEMÂNTICOS
   Use por elemento ou via classe utilitária (prefixo .q-).
   ============================================================= */

.q-hero, h1.q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--accent-deep);
}

.q-h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--accent-deep);
}

.q-h2, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--accent-deep);
}

.q-h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--accent-deep);
}

.q-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

/* Eyebrow / tagline em caixa alta com tracking largo */
.q-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* Botão primário com gradiente da marca */
.q-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--branco);
  background: var(--grad-marca);
  border: none;
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-6);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.q-btn:hover { transform: translateY(-2px); box-shadow: var(--glow-ciano); }