/* Lorica — cor da identidade Razach.
 *
 * Seis nomes oficiais, e só (manual, seção 04): Ciano Ártico, Turquesa, Petróleo,
 * Petróleo Profundo, Grafite, Névoa. Nenhum matiz fora da família ciano-petróleo.
 * A escala é monocromática: um único matiz frio levado de quase-branco a quase-preto.
 *
 * O que substituiu. A paleta anterior era da Life Laboral — turquesa #43B5B6 com azul
 * institucional #0086C4 e marinho profundo. O azul não sobrevive à adoção: a Razach não
 * tem segundo matiz, e o que era `--color-secondary` passa a ser um degrau da MESMA rampa.
 * Os tokens crus `--ll-*` foram eliminados, não aliasados: token com nome de outra marca
 * é promessa sem implementação atrás.
 *
 * Rampa de marca 100–900, rampa de neutros e cores de estado são ADIÇÃO INTENCIONAL da
 * skill (readme, seção 6) — o manual é monocromático e uma interface precisa comunicar
 * falha. Elas são dessaturadas de propósito para não competir com a marca.
 */
:root {
  /* ---- Paleta oficial (identidade visual Razach, página 05) ---- */
  --ciano-artico:       #6FCBCE;
  --turquesa:           #35989F;
  --petroleo:           #1B6470;
  --petroleo-profundo:  #10363B;
  --grafite:            #0C1719;
  --nevoa:              #F4F7F7;

  /* ---- Rampa de marca (interpolada da paleta, para estados de UI) ---- */
  --brand-100: #E4F4F5;
  --brand-200: #C4E8E9;
  --brand-300: #9FDADC;
  --brand-400: #6FCBCE;
  --brand-500: #35989F;
  --brand-600: #1B6470;
  --brand-700: #154E58;
  --brand-800: #10363B;
  --brand-900: #0C1719;

  /* ---- Neutros (cast teal, ancorados em Névoa e Grafite) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F4F7F7;
  --neutral-100: #E8EDED;
  --neutral-200: #D5DEDE;
  --neutral-300: #B6C3C4;
  --neutral-400: #8C9C9E;
  --neutral-500: #66787A;
  --neutral-600: #4A5A5C;
  --neutral-700: #334244;
  --neutral-800: #1F2E30;
  --neutral-900: #121F21;
  --neutral-950: #0C1719;

  /* ---- Estado. Adição intencional: o manual é monocromático. ---- */
  --success:         #1B7F63;
  --success-surface: #E3F2EC;
  --success-border:  #A7D6C6;
  --warning:         #A9741A;
  --warning-surface: #FBF1DE;
  --warning-border:  #E5CB93;
  --danger:          #B03A32;
  --danger-surface:  #FBE9E7;
  --danger-border:   #E9B4AE;
  --info:            #1B6470;
  --info-surface:    #E4F4F5;
  --info-border:     #9FDADC;

  /* ---- Semânticos: superfície e texto ---- */
  --surface-page:         var(--nevoa);
  --surface-card:         var(--neutral-0);
  --surface-sunken:       var(--neutral-100);
  --surface-inverse:      var(--grafite);
  --surface-brand:        var(--petroleo);
  --surface-brand-subtle: var(--brand-100);
  --surface-brand-deep:   var(--petroleo-profundo);

  --text-strong:   var(--grafite);
  --text-body:     var(--neutral-800);
  --text-muted:    var(--neutral-600);
  --text-subtle:   var(--neutral-500);
  --text-on-brand: var(--neutral-0);
  --text-brand:    var(--petroleo);
  --text-accent:   var(--turquesa);
  --text-link:     var(--petroleo);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-brand:   var(--turquesa);
  --border-hair:    var(--neutral-100);

  --focus-ring:    rgb(53 152 159 / .34);
  --overlay-scrim: rgb(12 23 25 / .62);

  /* ---- Aliases de ação usados pelo produto ---- */
  /* Hover e press ESCURECEM um passo na rampa. Nunca opacidade: opacidade sobre o
     gradiente suja a cor (manual da skill, "Foco e estados"). */
  --color-primary:         var(--petroleo);
  --color-primary-hover:   var(--brand-700);
  --color-primary-active:  var(--brand-800);
  --color-primary-soft:    var(--brand-100);
  --color-secondary:       var(--turquesa);
  --color-secondary-hover: var(--brand-600);
  --color-secondary-soft:  var(--brand-100);

  /* ---- Gradiente da assinatura: 120°, Ciano Ártico → Petróleo ----
     UMA definição, UM ângulo. Aparece em quatro lugares e mais nenhum: botão de ação
     principal, indicador de aba ativa, preenchimento de controle marcado e faixa de 3px
     no topo de card com destaque. Não é fundo de página. */
  --gradient-brand: linear-gradient(120deg, #6FCBCE 0%, #1B6470 100%);
  --gradient-deep:  linear-gradient(120deg, #10363B 0%, #0C1719 100%);
  --gradient-soft:  linear-gradient(120deg, rgb(111 203 206 / .16) 0%, rgb(27 100 112 / .16) 100%);
  /* `--gradient-hero` era um gradiente de três paradas em azul-marinho. A skill recusa
     variantes de três paradas; o destaque escuro da casa é `--gradient-deep`. */
  --gradient-hero:  var(--gradient-deep);
}

/* ---- Tema escuro: fundo Grafite, marca em Ciano Ártico ---- */
[data-theme="dark"] {
  --surface-page:         var(--grafite);
  --surface-card:         var(--neutral-900);
  --surface-sunken:       #0A1416;
  --surface-inverse:      var(--nevoa);
  --surface-brand:        var(--turquesa);
  --surface-brand-subtle: var(--petroleo-profundo);
  --surface-brand-deep:   var(--grafite);

  --text-strong:   var(--nevoa);
  --text-body:     var(--neutral-200);
  --text-muted:    var(--neutral-400);
  --text-subtle:   var(--neutral-500);
  --text-on-brand: var(--grafite);
  --text-brand:    var(--ciano-artico);
  --text-accent:   var(--ciano-artico);
  --text-link:     var(--ciano-artico);

  --border-subtle:  var(--neutral-800);
  --border-default: #26383A;
  --border-strong:  var(--neutral-700);
  --border-hair:    var(--neutral-800);

  --focus-ring:    rgb(111 203 206 / .4);
  --overlay-scrim: rgb(6 12 13 / .74);

  --success:         #5BC49F;
  --success-surface: #0F2B23;
  --success-border:  #1F5747;
  --warning:         #DFAE55;
  --warning-surface: #2B2114;
  --warning-border:  #5A4520;
  --danger:          #E58A82;
  --danger-surface:  #2B1614;
  --danger-border:   #5C2C27;
  --info:            var(--ciano-artico);
  --info-surface:    var(--petroleo-profundo);
  --info-border:     var(--petroleo);

  --color-primary:        var(--turquesa);
  --color-primary-hover:  var(--ciano-artico);
  --color-primary-active: var(--brand-300);
  --color-primary-soft:   var(--petroleo-profundo);
}