/* =============================================================================
   KAÔ STUDIO — DESIGN SYSTEM
   tokens.css · Arquitetura de tokens em 3 camadas (§6)

   Camada 1 — PRIMITIVO  : valores brutos. Nunca consumidos por componente.
   Camada 2 — SEMÂNTICO  : papel na interface. Aponta para primitivos.
   Camada 3 — COMPONENTE : em components.css. Aponta para semânticos.

   Regra de ouro: nenhum componente consome primitivo direto.
   ============================================================================= */

/* =============================================================================
   CAMADA 1 — PRIMITIVOS
   ============================================================================= */
:root {
  /* ---- Cor · paleta oficial (Nico D'Anhaia / clok.pish) ------------------- */
  --kao-color-bordo:          #3E0001; /* §5.1 texto utilitário sobre claro   */
  --kao-color-creme:          #FFEDBD; /* §5.1 texto utilitário sobre escuro  */
  --kao-color-laranja-chama:  #F23000; /* §5.2 identidade Marketing           */
  --kao-color-laranja-ambar:  #FF8500; /* §5.2 identidade Produtora           */
  --kao-color-coxia:          #191919; /* §5.2 identidade Kultura (bastidor)  */
  --kao-color-verde:          #002B17; /* §5.2 identidade Aprenda Olhar       */
  --kao-color-azul:           #0031FF; /* §5.4 RESERVADA — sem uso definido   */

  /* Componentes RGB do bordô — base das sombras quentes (§10) */
  --kao-color-bordo-rgb:      62, 0, 1;

  /* ---- Espaçamento · escala base 4px (§9, §10) ---------------------------- */
  --kao-space-4:    4px;
  --kao-space-8:    8px;
  --kao-space-12:  12px;
  --kao-space-16:  16px;
  --kao-space-24:  24px;
  --kao-space-32:  32px;
  --kao-space-48:  48px;
  --kao-space-64:  64px;
  --kao-space-96:  96px;
  --kao-space-128: 128px;

  /* ---- Raio · base da pétala (§7) ----------------------------------------
     Aplicado sempre a DOIS cantos opostos na diagonal (a mecânica de
     orientação/alternância/hover entra na Etapa 4). Aqui só a escala bruta. */
  --kao-radius-sm:  8px;
  --kao-radius-md: 14px;
  --kao-radius-lg: 24px;
  --kao-radius-xl: 40px;

  /* ---- Traço / foco ------------------------------------------------------- */
  --kao-border-width:      1.5px;
  --kao-focus-ring-width:  3px;
  --kao-focus-ring-offset: 2px;

  /* ---- Alvo de toque mínimo (§10 acessibilidade) -------------------------- */
  --kao-touch-target-min: 44px;
}

/* =============================================================================
   CAMADA 2 — SEMÂNTICO
   ============================================================================= */
:root {
  /* ---- Texto utilitário (§5.1) -------------------------------------------
     Bordô e creme NUNCA são identidade de braço. Circulam como texto. */
  --color-text-on-light: var(--kao-color-bordo);
  --color-text-on-dark:  var(--kao-color-creme);

  /* ---- Identidade por braço (§5.2) · nunca se repetem entre si ------------ */
  --color-identity-marketing: var(--kao-color-laranja-chama);
  --color-identity-produtora: var(--kao-color-laranja-ambar);
  --color-identity-kultura:   var(--kao-color-coxia);
  --color-identity-aprenda:   var(--kao-color-verde);

  /* ---- Destaque geral do site guarda-chuva (§5.3) ------------------------
     Reaproveitamento proposital da paleta — nenhuma cor nova. */
  --color-highlight-primary:   var(--kao-color-laranja-ambar); /* #FF8500 */
  --color-highlight-secondary: var(--kao-color-laranja-chama); /* #F23000 */

  /* ---- Divisor (§5.1 papel extra do bordô) -------------------------------
     Bloco sólido de transição entre dois braços. Sempre sólido, nunca gradiente. */
  --color-divider: var(--kao-color-bordo);

  /* ---- Identidade ATIVA · trocada por data-brand na Etapa 2 --------------
     Default = studio (guarda-chuva). ASSUNÇÃO: studio usa o destaque primário. */
  --color-identity: var(--color-highlight-primary);

  /* ---- Sombras quentes derivadas do bordô (§10) · nunca cinza neutra ------ */
  --shadow-sm: 0 1px 2px  rgba(var(--kao-color-bordo-rgb), 0.08);
  --shadow-md: 0 4px 12px rgba(var(--kao-color-bordo-rgb), 0.12);
  --shadow-lg: 0 12px 32px rgba(var(--kao-color-bordo-rgb), 0.16);

  /* ---- Texto sobre a cor de identidade usada como fundo ------------------
     Creme sobre qualquer identidade (chama, âmbar, coxia, verde). O par
     creme/âmbar é exceção estética assumida pela marca (abaixo de AA). */
  --color-text-on-identity: var(--color-text-on-dark);

  /* ---- Foco visível com estilo da marca (§10) ---------------------------- */
  --focus-ring-color: var(--color-identity);
}

/* =============================================================================
   CAMADA 2 (cont.) — TEMAS MULTIMARCA · data-brand (§6)

   Estrutura de marca:
     Kaô Studio ............ empresa / guarda-chuva
     Marketing, Produtora .. serviços mestres (B2B)
     Aprenda Olhar ......... ensino (outra natureza → braço próprio)
     Kultura ............... vive DENTRO da Produtora, fala com artistas
                             → braço próprio; aninha sob [data-brand=produtora]

   Cada tema troca APENAS a identidade ativa. Um mesmo componente funciona em
   qualquer braço sem alterar markup. As cores não são exclusivas do braço
   (§5.3): são âncora semiótica, circulam livres como destaque.

   Nota: studio e produtora coincidem em #FF8500 — intencional. A âmbar é o
   destaque primário do guarda-chuva (§5.3) e também a identidade da Produtora.
   ============================================================================= */

[data-brand="studio"]    { --color-identity: var(--color-highlight-primary);  } /* #FF8500 */
[data-brand="marketing"] { --color-identity: var(--color-identity-marketing); } /* #F23000 */
[data-brand="produtora"] { --color-identity: var(--color-identity-produtora); } /* #FF8500 */
[data-brand="kultura"]   { --color-identity: var(--color-identity-kultura);   } /* #191919 */
[data-brand="aprenda"]   { --color-identity: var(--color-identity-aprenda);   } /* #002B17 */