/* ============================================================
   STUDIO SORA — Design System
   Tokens e utilitarios extraidos do Manual da Marca.
   Uso: <link rel="stylesheet" href="brand/tokens.css">
   Fontes: Sora (100/200/300), IBM Plex Mono (400), Noto Sans JP.
   ============================================================ */

:root {
  /* --- Escala neutra (vies frio, 6 passos) --- */
  --sora-noite:   #0E1016;  /* fundo principal        */
  --sora-grafite: #161A22;  /* superficies            */
  --sora-aco:     #242A36;  /* fios e bordas          */
  --sora-nevoa:   #6B7482;  /* texto secundario/escuro*/
  --sora-cinza:   #B9C1CC;  /* texto secundario/claro */
  --sora-luz:     #F7F9FC;  /* simbolo e texto        */

  /* --- Tons de apoio (nao na escala principal) --- */
  --sora-texto-2:    #97A0AE; /* corpo sobre escuro    */
  --sora-texto-3:    #4A525E; /* rotulos fracos        */
  --sora-tinta:      #4C5460; /* corpo sobre claro     */
  --sora-linha:      #1E2430; /* divisor de secao      */
  --sora-linha-clara:#E3E7EE; /* divisor sobre papel   */

  /* --- Cor viva --- */
  --sora-acento: #F0A45C;  /* AMBAR — cor institucional (padrao) */
  --sora-azul:   #5C8DF6;  /* AZUL-CEU — projetos    */
  --sora-aqua:   #7BE0C8;  /* AQUA — cases           */
  --sora-coral:  #F0685A;  /* CORAL — conteudo       */
  /* Trocavel por projeto: redefina --sora-acento no escopo da peca.
     Uma peca usa uma cor viva so. Nunca dentro do simbolo. */

  /* --- Tipografia --- */
  --sora-fonte: 'Sora', system-ui, sans-serif;
  --sora-mono:  'IBM Plex Mono', ui-monospace, monospace;
  --sora-jp:    'Noto Sans JP', var(--sora-fonte);

  --sora-track-marca:  0.34em; /* assinatura/titulos: 0.34–0.42em */
  --sora-track-rotulo: 0.2em;  /* rotulos mono         */

  /* --- Ritmo --- */
  --sora-gutter: 72px;   /* margem lateral de secao   */
  --sora-secao:  96px;   /* respiro vertical de secao */
}

/* ---------- Base ---------- */
.sora {
  margin: 0;
  background: var(--sora-noite);
  color: var(--sora-luz);
  font-family: var(--sora-fonte);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sora *, .sora *::before, .sora *::after { box-sizing: border-box; }
.sora a { color: var(--sora-luz); text-decoration: underline; text-underline-offset: 3px; }
.sora a:hover { color: var(--sora-texto-2); }

/* ---------- Utilitarios de texto ---------- */
/* Rotulo/descritor mono (ex.: "01 · Conceito", "PROPOSTA · 2026") */
.sora-rotulo {
  font-family: var(--sora-mono);
  font-size: 11px;
  letter-spacing: var(--sora-track-rotulo);
  text-transform: uppercase;
  color: var(--sora-nevoa);
}
.sora-rotulo--acento { color: var(--sora-acento); text-transform: none; }

/* Titulo de secao — Sora 200, leve */
.sora-titulo {
  margin: 0;
  font-weight: 200;
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* Corpo sobre escuro */
.sora-corpo {
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--sora-texto-2);
  text-wrap: pretty;
}

/* Marca por extenso (lockup em HTML) */
.sora-marca {
  font-weight: 200;
  letter-spacing: var(--sora-track-marca);   /* nunca < 0.28em */
  line-height: 1;
}

/* ---------- Emblema (componente) ----------
   <span class="sora-emblema" style="--s:54px"></span>
   Recolore com currentColor via `color`. Troca variante por tamanho:
   .sora-emblema--reduzido (<32px), .sora-emblema--minimo (<20px).      */
.sora-emblema {
  display: inline-block;
  width: var(--s, 54px);
  height: var(--s, 54px);
  color: var(--sora-luz);
  background: currentColor;
  -webkit-mask: var(--sora-emblema-img) center / contain no-repeat;
          mask: var(--sora-emblema-img) center / contain no-repeat;
  --sora-emblema-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20fill='none'%20stroke='black'%20stroke-width='14'%20stroke-linecap='round'%3E%3Ccircle%20cx='100'%20cy='152'%20r='21'%20fill='black'%20stroke='none'/%3E%3Cpath%20d='M48%20152%20A52%2052%200%200%201%20152%20152'/%3E%3Cpath%20d='M14%20152%20A86%2086%200%200%201%20186%20152'/%3E%3C/svg%3E");
}
.sora-emblema--reduzido {
  --sora-emblema-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20fill='none'%20stroke='black'%20stroke-width='18'%20stroke-linecap='round'%3E%3Ccircle%20cx='100'%20cy='152'%20r='24'%20fill='black'%20stroke='none'/%3E%3Cpath%20d='M42%20152%20A58%2058%200%200%201%20158%20152'/%3E%3C/svg%3E");
}
.sora-emblema--minimo {
  --sora-emblema-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20fill='none'%20stroke='black'%20stroke-width='22'%20stroke-linecap='round'%3E%3Ccircle%20cx='100'%20cy='152'%20r='26'%20fill='black'%20stroke='none'/%3E%3Cpath%20d='M34%20152%20A66%2066%200%200%201%20166%20152'/%3E%3C/svg%3E");
}

/* ---------- Superficie / cartao ---------- */
.sora-card {
  background: var(--sora-grafite);
  border: 1px solid var(--sora-aco);
  padding: 28px;
}

/* ---------- Campo de cor (secao em acento) ---------- */
.sora-campo {
  background: var(--sora-acento);
  color: var(--sora-noite);
}
.sora-campo .sora-corpo { color: var(--sora-noite); opacity: .75; }