/* ==============================================================
   TEKHELET — paleta prime unica da lions intelligence
   v1.0 · vigente desde 26.07.2026 · decisao de rodrigo castro ribeiro

   tekhelet e o nome do azul biblico tingido do murex — o azul das
   franjas do manto de oracao e a origem da faixa da bandeira de israel.
   nao e "azul escuro n7". e o azul que a lions escolheu por conviccao.

   esta paleta SUBSTITUI as 10 paletas prime anteriores (dubai gold,
   imperial sapphire, onyx, ruby, emerald, platinum noir, bordeaux,
   saffron, quartz rose, midnight aurum), todas arquivadas em 26.07.2026.

   compatibilidade: 100% derivada da rampa oficial 360 v2.0. nenhum
   azul novo foi inventado — os cinco azuis sao os mesmos do
   tokens-lions.json. o que muda e a profundidade do fundo e o metal.
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ============ FUNDO — a rampa de profundidade ============
     o luxo do azul vem da fundura, nao do brilho.
     isto e o interior do estojo, nao a joia. */

  --tk-void:      #010509;  /* nivel 0 — preto que ainda e azul */
  --tk-abyss:     #020814;  /* ← FUNDO BASE de toda peca tekhelet */
  --tk-midnight:  #050B26;  /* secao elevada, faixa, header */
  --tk-surface:   #0A1330;  /* card, painel, superficie de conteudo */
  --tk-surface-2: #101B42;  /* hover, superficie sobre superficie */

  /* ============ AZUL — a joia ============
     identicos a rampa oficial 360 v2.0. nenhum tom inventado. */

  --tk-blue-100: #DBE6FF;
  --tk-blue-200: #B8CDFF;
  --tk-blue-300: #85A9FF;  /* ← unico azul aprovado para TEXTO em fundo escuro */
  --tk-blue-400: #2969FF;  /* ← a joia. brilho, foco, grafico, filete luminoso */
  --tk-blue-500: #0038B8;  /* ← BRAND. preenchimento de botao, barra, selo */
  --tk-blue-600: #002F9E;
  --tk-blue-700: #002885;
  --tk-blue-800: #00206B;
  --tk-blue-900: #001852;  /* veludo. fundo de bloco nobre */

  /* ============ PLATINA — o metal frio ============
     substitui o ouro. prata nunca escorrega para cafona. */

  --tk-platinum-bright: #F5F3EE;  /* ← texto principal. 18,1:1 sobre abyss */
  --tk-platinum:        #E5E4E2;  /* metal, fio, wordmark. 15,8:1 */
  --tk-silver:          #C0C0C0;  /* metal secundario. 11,0:1 */
  --tk-steel:           #8E9199;  /* ← texto secundario. 6,4:1 — AA */
  --tk-graphite:        #4A4F58;  /* SO divisor e borda. 2,4:1 — nunca texto */

  /* ============ FIOS ============
     em peca prime, borda e fio de 1px — nunca traco grosso. */

  --tk-hairline:        rgba(229, 228, 226, 0.12);
  --tk-hairline-strong: rgba(229, 228, 226, 0.22);
  --tk-hairline-blue:   rgba(41, 105, 255, 0.24);

  /* ============ SEMANTICOS — herdados da 360 ============ */

  --tk-success: #25D366;  /* 10,1:1 sobre abyss — aprovado tambem como texto */
  --tk-warning: #F5C518;  /* 12,3:1 — aprovado como texto em fundo escuro */
  --tk-danger:  #DC2626;  /* 4,2:1 — SO preenchimento e borda. nunca texto */

  /* ============ ALIASES SEMANTICOS ============
     em codigo tekhelet use SEMPRE estes, nunca o token cru. */

  --tk-bg:            var(--tk-abyss);
  --tk-bg-elevated:   var(--tk-midnight);
  --tk-bg-card:       var(--tk-surface);
  --tk-bg-hover:      var(--tk-surface-2);
  --tk-bg-noble:      var(--tk-blue-900);

  --tk-text:          var(--tk-platinum-bright);
  --tk-text-soft:     var(--tk-steel);
  --tk-text-metal:    var(--tk-platinum);
  --tk-text-link:     var(--tk-blue-300);
  --tk-text-on-blue:  var(--tk-platinum-bright);
  --tk-text-on-metal: var(--tk-abyss);

  --tk-border:        var(--tk-hairline);
  --tk-border-strong: var(--tk-hairline-strong);
  --tk-border-jewel:  var(--tk-hairline-blue);

  --tk-primary:       var(--tk-blue-500);
  --tk-primary-hover: var(--tk-blue-600);
  --tk-jewel:         var(--tk-blue-400);
  --tk-focus-ring:    rgba(41, 105, 255, 0.38);

  /* ============ GRADIENTES ============
     regra absoluta: metal nunca chapado. sempre com virada de luz,
     senao le como cinza, nao como platina. */

  --tk-metal: linear-gradient(135deg, #F5F3EE 0%, #E5E4E2 34%, #A9ADB4 68%, #E5E4E2 100%);
  --tk-sapphire: linear-gradient(135deg, #2969FF 0%, #0038B8 46%, #001852 100%);
  --tk-veil: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(41,105,255,0.16) 0%, transparent 62%);
  --tk-depth: linear-gradient(180deg, #050B26 0%, #020814 100%);
  --tk-hairline-glow: linear-gradient(90deg, transparent 0%, rgba(41,105,255,0.55) 50%, transparent 100%);

  /* ============ TIPOGRAFIA ============
     display: sans geometrica de alta classe. jost e a linhagem futura —
     bauhaus, modernista, aristocratica sem ser serifa. mantem a 360
     intacta: nenhuma serifa foi autorizada.
     peso fino + tracking amplo = elegancia. peso grosso = banco popular. */

  --tk-font-display: 'Jost', 'Futura', 'Avenir Next', 'Poppins', system-ui, sans-serif;
  --tk-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --tk-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --tk-display-1: clamp(44px, 7vw, 92px);
  --tk-display-2: clamp(32px, 4.6vw, 58px);
  --tk-display-3: clamp(22px, 2.6vw, 32px);
  --tk-lead:      19px;
  --tk-body:      16px;
  --tk-small:     14px;
  --tk-caption:   12px;
  --tk-micro:     10px;

  --tk-weight-hair:  200;  /* display grande — o peso do luxo */
  --tk-weight-light: 300;
  --tk-weight-book:  400;
  --tk-weight-med:   500;

  --tk-track-vast:  0.22em;  /* kicker, wordmark, selo */
  --tk-track-wide:  0.12em;
  --tk-track-open:  0.04em;
  --tk-track-tight: -0.02em; /* so em display grande */

  --tk-leading-tight: 1.05;
  --tk-leading-snug:  1.25;
  --tk-leading-body:  1.75;  /* prosa em peca prime respira mais que o normal */

  /* ============ ESPACO — a terceira alavanca do luxo ============
     luxo e espaco que voce podia encher e escolheu nao encher.
     em peca tekhelet, o padding minimo de bloco e 40px. */

  --tk-space-1: 4px;   --tk-space-2: 8px;   --tk-space-3: 12px;
  --tk-space-4: 16px;  --tk-space-6: 24px;  --tk-space-8: 32px;
  --tk-space-10: 40px; --tk-space-14: 56px; --tk-space-20: 80px;
  --tk-space-28: 112px; --tk-space-40: 160px;

  --tk-block-pad: var(--tk-space-10);  /* minimo inegociavel */
  --tk-section-gap: var(--tk-space-28);

  /* ============ RAIO ============
     luxo tem canto discreto. nada de pill em peca institucional
     — pill e linguagem de app, nao de private bank. */

  --tk-radius-sm: 2px;
  --tk-radius:    4px;
  --tk-radius-md: 8px;
  --tk-radius-lg: 14px;

  /* ============ SOMBRA ============
     em fundo quase-preto, sombra preta nao existe. a elevacao
     vem de LUZ: fio superior claro + halo azul. */

  --tk-lift-1: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.5);
  --tk-lift-2: 0 1px 0 rgba(255,255,255,0.07) inset, 0 24px 64px -24px rgba(0,0,0,0.75);
  --tk-glow:   0 0 0 1px rgba(41,105,255,0.25), 0 12px 48px -18px rgba(41,105,255,0.45);
  --tk-focus:  0 0 0 3px var(--tk-focus-ring);

  /* ============ MOVIMENTO ============
     luxo nunca tem pressa. transicoes mais longas que o padrao. */

  --tk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tk-fast: 220ms var(--tk-ease);
  --tk-base: 380ms var(--tk-ease);
  --tk-slow: 620ms var(--tk-ease);
}

/* ==============================================================
   REGRAS DE USO — nao decorativas, sao lei da paleta
   ==============================================================

   1. PROPORCAO 60-30-10
      60% abyss/midnight (fundo) · 30% surface + azul (estrutura)
      10% platina (metal, texto, fio). nunca inverter.
      platina em bloco grande vira aluminio de cozinha.

   2. A JOIA E PONTUAL
      --tk-jewel (#2969FF) aparece em no maximo tres pontos por tela.
      se estiver em todo lugar, deixou de ser joia e virou plastico.

   3. CONTRASTE — medido, nao estimado
      texto principal  -> platinum-bright 18,1:1 (AAA)
      texto secundario -> steel           6,4:1  (AA)
      link e destaque  -> blue-300        8,7:1  (AAA)
      blue-400 (4,4:1) -> so texto grande, icone e grafico. nunca corpo
      blue-500 (2,2:1) -> NUNCA texto em fundo escuro. so preenchimento
      danger  (4,2:1)  -> so preenchimento e borda. nunca texto
      graphite(2,4:1)  -> so divisor. nunca texto

   4. METAL NUNCA CHAPADO
      superficie metalica usa --tk-metal (gradiente com virada de luz).
      #E5E4E2 solido em area grande le como cinza morto.

   5. ESPACO E MATERIAL
      padding minimo de bloco: 40px. gap de secao: 112px.
      apertar o layout destroi a paleta mais rapido que errar a cor.

   6. TIPOGRAFIA
      display grande sempre em peso 200/300. peso 600+ em display
      grande mata a elegancia. kicker sempre em mono com track-vast.

   7. SEM SERIFA, SEM OURO
      a 360 v2.0 continua valendo integralmente. tekhelet nao e
      excecao a ela — e um vestido dela para ocasiao formal.
   ============================================================== */

/* ============ BASE ============ */

.tk {
  background: var(--tk-bg);
  background-image: var(--tk-veil);
  color: var(--tk-text);
  font-family: var(--tk-font-body);
  font-size: var(--tk-body);
  line-height: var(--tk-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* ============ TIPOGRAFIA ============ */

.tk-display {
  font-family: var(--tk-font-display);
  font-weight: var(--tk-weight-hair);
  font-size: var(--tk-display-1);
  line-height: var(--tk-leading-tight);
  letter-spacing: var(--tk-track-tight);
  color: var(--tk-text);
}
.tk-title {
  font-family: var(--tk-font-display);
  font-weight: var(--tk-weight-light);
  font-size: var(--tk-display-3);
  line-height: var(--tk-leading-snug);
  letter-spacing: var(--tk-track-open);
}
.tk-kicker {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-micro);
  font-weight: var(--tk-weight-med);
  letter-spacing: var(--tk-track-vast);
  text-transform: uppercase;
  color: var(--tk-jewel);
}
.tk-wordmark {
  font-family: var(--tk-font-display);
  font-weight: var(--tk-weight-light);
  letter-spacing: var(--tk-track-vast);
  text-transform: uppercase;
  background: var(--tk-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tk-soft { color: var(--tk-text-soft); }
.tk-link {
  color: var(--tk-text-link);
  text-decoration: none;
  border-bottom: 1px solid var(--tk-border-jewel);
  transition: color var(--tk-fast), border-color var(--tk-fast);
}
.tk-link:hover { color: var(--tk-blue-200); border-color: var(--tk-jewel); }

/* ============ SUPERFICIES ============ */

.tk-card {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-md);
  padding: var(--tk-block-pad);
  box-shadow: var(--tk-lift-1);
  transition: border-color var(--tk-base), box-shadow var(--tk-base);
}
.tk-card:hover { border-color: var(--tk-border-jewel); box-shadow: var(--tk-lift-2); }
.tk-card-noble {
  background: var(--tk-bg-noble);
  border: 1px solid var(--tk-border-jewel);
}
.tk-rule { height: 1px; border: 0; background: var(--tk-hairline-glow); margin: var(--tk-space-14) 0; }

/* ============ ACOES ============ */

.tk-btn {
  font-family: var(--tk-font-display);
  font-weight: var(--tk-weight-med);
  font-size: var(--tk-small);
  letter-spacing: var(--tk-track-wide);
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: var(--tk-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--tk-base);
}
.tk-btn-primary { background: var(--tk-primary); color: var(--tk-text-on-blue); }
.tk-btn-primary:hover { background: var(--tk-primary-hover); box-shadow: var(--tk-glow); }
.tk-btn-metal { background: var(--tk-metal); color: var(--tk-text-on-metal); }
.tk-btn-metal:hover { filter: brightness(1.08); }
.tk-btn-ghost { background: transparent; color: var(--tk-text-metal); border-color: var(--tk-border-strong); }
.tk-btn-ghost:hover { border-color: var(--tk-jewel); color: var(--tk-blue-200); }
.tk-btn:focus-visible { outline: none; box-shadow: var(--tk-focus); }

/* ============ SELO ============ */

.tk-seal {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--tk-font-mono);
  font-size: var(--tk-micro);
  letter-spacing: var(--tk-track-wide);
  text-transform: uppercase;
  color: var(--tk-text-metal);
  border: 1px solid var(--tk-border-strong);
  border-radius: 999px;
  padding: 6px 14px;
}

/* ============ CAMPO ============ */

.tk-field {
  width: 100%;
  background: var(--tk-void);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  padding: 14px 16px;
  color: var(--tk-text);
  font-family: var(--tk-font-body);
  font-size: var(--tk-body);
  transition: border-color var(--tk-fast), box-shadow var(--tk-fast);
}
.tk-field::placeholder { color: var(--tk-graphite); }
.tk-field:focus { outline: none; border-color: var(--tk-jewel); box-shadow: var(--tk-focus); }

/* ============ PELE data-tema=tekhelet ============
   remapeia os aliases 360 para a rampa prime.
   a galeria usa os mesmos componentes; a spec .tk-* continua valida
   para peca escrita do zero. fundo e abyss (#020814), nunca #001852. */

html[data-tema="tekhelet"] {
  color-scheme: dark;
  --color-bg:            var(--tk-bg);
  --color-bg-soft:       var(--tk-bg-elevated);
  --color-bg-card:       var(--tk-bg-card);
  --color-bg-inverse:    var(--tk-platinum-bright);
  --color-text:          var(--tk-text);
  --color-text-soft:     var(--tk-text-soft);
  --color-text-muted:    var(--tk-steel);
  --color-text-inverse:  var(--tk-abyss);
  --color-border:        var(--tk-border);
  --color-border-strong: var(--tk-border-strong);
  --color-primary:       var(--tk-primary);
  --color-primary-hover: var(--tk-primary-hover);
  --color-primary-soft:  var(--tk-surface-2);
  --color-on-primary:    var(--tk-text-on-blue);
  --color-link:          var(--tk-text-link);
  --color-focus-ring:    var(--tk-focus-ring);
  --color-info:          var(--tk-jewel);
  --font-display:        var(--tk-font-display);
  --radius-sm:           var(--tk-radius-sm);
  --radius-md:           var(--tk-radius);
  --radius-lg:           var(--tk-radius-md);
  --radius-pill:         var(--tk-radius);
  --shadow-sm:           var(--tk-lift-1);
  --shadow-md:           var(--tk-lift-1);
  --shadow-lg:           var(--tk-lift-2);
  --shadow-focus:        var(--tk-focus);
}

html[data-tema="tekhelet"] body {
  background: var(--tk-bg);
  background-image: var(--tk-veil);
  color: var(--tk-text);
}

/* by lions intelligence */