/* ToolDay · Design Tokens */
/* A identidade visual em código, pronta para colar em qualquer projeto. */

:root {
  /* Cores */
  --td-coral:          #FF5A36;  /* principal, CTA, grifo */
  --td-ink:            #1C1C26;  /* texto, fundo fechado */
  --td-cream:          #FBF6EF;  /* base de conteúdo */
  --td-yellow:         #FFB22E;  /* acento, spark */
  --td-panel:          #EDE4D6;  /* bordas e divisórias */
  --td-muted:          #6F6A60;  /* texto secundário */

  /* Tipografia */
  --td-font-display:   "Space Grotesk", sans-serif;
  --td-font-body:      "Inter", sans-serif;
  --td-font-hand:      "Caveat", cursive;
  --td-display-weight: 700;
  --td-display-tracking: -0.025em;

  /* Espaçamento (escala em px) */
  --td-space:          4 8 12 16 24 32 48 64;

  /* Forma */
  --td-radius:         16px;
  --td-format-ig:      1080 / 1350;  /* 4:5 */

  /* Lockup: spark ao lado do ToolDay (sempre em em, escala com a fonte) */
  --td-spark-size:     .56em;   /* tamanho do spark */
  --td-spark-gap:      .08em;   /* margin-left: distância das letras */
  --td-spark-top:      .17em;   /* margin-top: alinhado ao topo das letras */

  /* Respiro e tamanho mínimo do logo */
  --td-logo-clear:     .56em;   /* área livre ao redor = altura do spark (S) */
  --td-logo-min:       120px;   /* largura mínima do logo na tela; 30 mm impresso */
  --td-spark-min:      24px;    /* tamanho mínimo do spark sozinho; 6 mm impresso */
}

/* Spark cheio (SVG path, viewBox 0 0 100 100):
   M50 4 Q56 44 96 50 Q56 56 50 96 Q44 56 4 50 Q44 44 50 4 Z
   Contornado: acrescente o path interno com fill-rule evenodd:
   M50 15.96 Q54.44 45.56 84.04 50 Q54.44 54.44 50 84.04 Q45.56 54.44 15.96 50 Q45.56 45.56 50 15.96 Z */

/* Cores de apoio e margem lateral do Site (valores do DESIGN.md do Site ToolDay) */
:root {
  --td-paper:          #FFFFFF;    /* branco: cartões e campos do Painel */
  --td-on-ink-soft:    #FBF6EFBF;  /* creme 75% sobre grafite: texto secundário */
  --td-on-ink-hairline: #FBF6EF2E; /* creme 18% sobre grafite: divisórias */
  --td-on-ink-hover:   #FBF6EF1A;  /* creme 10% sobre grafite: hover de item */
  --td-scrim:          #1C1C2680;  /* véu grafite 50% atrás de diálogo e gaveta */
  --td-error:          #B42318;    /* erro: ícone do aviso de erro */
  --td-error-soft:     #FBE3DD;    /* erro: fundo do aviso de erro */
  --td-warning:        #8A5300;    /* aviso: ícone do aviso de atenção */
  --td-warning-soft:   #FFF1D6;    /* aviso: fundo do aviso de atenção */
  --td-serp-link:      #1A0DAB;    /* azul de busca: só o título da prévia do Google no Painel */
  --td-gutter:         clamp(20px, 5vw, 64px);  /* margem lateral das páginas */
}