/*
  tokens.css — StudioJM · Direção NOVA "Vitrine" (Nova, 2026-06-13)
  Supera a direção Garak ("Painel de prova"): breu + veludo + vidro + acento vivo.
  "Vitrine de joalheria à noite": profundidade real, luz com direção, brilho onde importa.
  Compatibilidade reversa mantida via aliases --color-* para style.css existente.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Superfícies — breu de vitrine + elevação por luz ──────────── */
  --bg:              #040D12;   /* breu petróleo (mais fundo que o anterior) */
  --bg-2:            #06141B;   /* segundo plano */
  --surface:         #0E1C26;   /* veludo base: cards, sidebar */
  --surface-2:       #13242F;   /* +1 elevação: hover, item ativo */
  --surface-3:       #1B303C;   /* +2: peça em foco, dropdown */
  --surface-glass:   rgba(20,38,49,.55); /* vidro: painel em foco sobre o mesh */
  --surface-sunken:  #08151C;   /* recuo: track, thumb vazio */

  /* ─── Bordas e luz de borda (star do dark premium) ───────────────── */
  --line:            rgba(155,168,171,.10);  /* hairline padrão */
  --line-strong:     rgba(155,168,171,.18);  /* borda em hover/foco */
  --rim:             rgba(255,255,255,.07);  /* rim-light: fio de luz no topo */
  --rim-strong:      rgba(255,255,255,.11);  /* rim em elemento em foco/glass */
  --glass-edge:      rgba(255,255,255,.10);  /* borda que pega luz no vidro */

  /* ─── Mesh de fundo (atmosfera de profundidade) ──────────────────── */
  --bg-mesh:
    radial-gradient(48% 70% at 8% -16%, rgba(95,227,208,.09), transparent 58%),
    radial-gradient(60% 78% at 22% -10%, rgba(57,194,214,.07), transparent 60%),
    radial-gradient(54% 72% at 66% -22%, rgba(37,55,69,.5),   transparent 64%),
    radial-gradient(40% 60% at 92% -14%, rgba(57,194,214,.04), transparent 58%);

  /* ─── Tinta (texto) — pico de luz mais alto ─────────────────────── */
  --ink:             #D7DCDB;   /* primário */
  --ink-bright:      #F2F5F4;   /* pico: número-herói, título de palco */
  --ink-soft:        #9BA8AB;   /* secundário: labels, subtítulos */
  --ink-muted:       #71828D;   /* terciário legível AA */
  --ink-faint:       #465864;   /* faint decorativo: ícone inativo, disabled */

  /* ─── Acento — ciano-teal VIVO (gradiente + glow). A alma. ─────── */
  --accent:          #39C2D6;
  --accent-bright:   #5FE3D0;
  --accent-deep:     #2A8FB0;
  --accent-grad:     linear-gradient(135deg,#5FE3D0 0%,#34BFD6 50%,#2E9DBE 100%);
  --accent-hover:    #4DD4E8;
  --accent-press:    #2E9DBE;
  --accent-ink:      #03171C;   /* texto sobre o acento (contraste AA forte) */
  --accent-soft:     rgba(57,194,214,.13);  /* wash: chip ativo, nav ativa, foco */
  --accent-line:     rgba(57,194,214,.45);  /* borda do acento */
  --accent-glow:     0 6px 26px rgba(57,194,214,.34), 0 2px 8px rgba(57,194,214,.22);
  --accent-glow-soft:0 4px 22px rgba(57,194,214,.18);

  /* ─── Status — hues lavados sobre escuro ────────────────────────── */
  --st-rascunho:     #8A99A0;   --st-rascunho-bg:    rgba(138,153,160,.12);
  --st-revisao:      #E0B25A;   --st-revisao-bg:     rgba(224,178,90,.13);
  --st-aguardando:   #39C2D6;   --st-aguardando-bg:  rgba(57,194,214,.13);
  --st-aprovado:     #5FC98C;   --st-aprovado-bg:    rgba(95,201,140,.13);
  --st-reprovado:    #E58A6B;   --st-reprovado-bg:   rgba(229,138,107,.15);
  --st-agendado:     #A79BE6;   --st-agendado-bg:    rgba(167,155,230,.14);

  /* ─── Alerta e scrim ─────────────────────────────────────────────── */
  --alert:           var(--st-reprovado);
  --alert-bg:        var(--st-reprovado-bg);
  --alert-glow:      0 0 0 1px rgba(229,138,107,.30), 0 4px 18px rgba(229,138,107,.16);
  --scrim:           rgba(4,13,18,.7);

  /* ─── Tipografia ─────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, monospace;
  --fraunces:     "opsz" 40, "SOFT" 30, "WONK" 0;

  /* ─── Escala tipográfica ─────────────────────────────────────────── */
  --t-hero:  5rem;       /* 80px — número-herói */
  --t-mega:  3.25rem;    /* 52px — KPI */
  --t-h1:    2.125rem;   /* 34px — título de palco */
  --t-h2:    1.375rem;   /* 22px — seção, cliente */
  --t-h3:    1.0625rem;  /* 17px — card/peça */
  --t-body:  0.9375rem;  /* 15px */
  --t-sm:    0.8125rem;  /* 13px */
  --t-label: 0.6875rem;  /* 11px — label caixa-alta */

  --lh-tight: 1.03;
  --lh-snug:  1.3;
  --lh-body:  1.55;
  --track-label: .10em;
  --track-tight: -.02em;

  /* ─── Espaçamento (escala 4/8) ───────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --gutter:   var(--sp-5);
  --pad-card: var(--sp-5);
  --pad-page: clamp(16px, 4vw, 40px);

  /* ─── Raio ───────────────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ─── Sombra — luz + profundidade (anel interno de luz) ─────────── */
  --sh-1:     0 1px 0 var(--rim), 0 1px 2px rgba(0,0,0,.30);
  --sh-2:     inset 0 1px 0 var(--rim), 0 1px 2px rgba(0,0,0,.30), 0 12px 32px rgba(0,0,0,.45);
  --sh-glass: inset 0 1px 0 var(--rim-strong), inset 0 0 0 1px var(--glass-edge),
              0 24px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --sh-float: inset 0 1px 0 var(--rim-strong), 0 30px 80px rgba(0,0,0,.6);
  --sh-3:     var(--sh-float);

  /* ─── Movimento ──────────────────────────────────────────────────── */
  --ease:    cubic-bezier(.2,0,0,1);
  --dur:     160ms;
  --dur-lg:  280ms;

  /* ─── Layout ─────────────────────────────────────────────────────── */
  --sidebar-w:   272px;
  --content-max: 1080px;

  /* ─── Personalização por cliente (Parte V da Direção de Sistema) ─────────
     Etiqueta de cliente no LADO DA JÉ: só identificação, nunca toma a tela.
     Regra de ouro: --cliente-cor só pode aparecer em UM fio de 3px (borda
     lateral de card/linha), no ANEL do avatar, e num PONTO. Nunca em texto,
     fundo de bloco ou cor de ação (ação é sempre o teal do sistema). Senão a
     carteira com 8 clientes vira arco-íris. Sobrescrito inline por card/linha. */
  --cliente-cor: var(--accent);

  /* Variáveis de MARCA do portal — fallback no teal do sistema, para qualquer
     tela SEM cliente continuar teal. No PORTAL, o backend (engine/marca.js)
     sobrescreve estas inline no :root a partir de cores.primaria do cliente.
     A cor crua (--marca) só pinta céu/decoração; --marca-seguro é a tinta
     funcional (derivada até passar AA); o botão usa --marca-grad-btn (claro→
     claro) + --marca-ink (tinta escura) — a lição dos dois gradientes. */
  --marca:        var(--accent);
  --marca-seguro: var(--accent-bright);
  --marca-deep:   var(--accent-deep);
  --marca-bright: var(--accent-bright);
  --marca-ink:    var(--accent-ink);
  --marca-grad:     var(--accent-grad);
  --marca-grad-btn: linear-gradient(135deg, var(--accent-bright), var(--accent));
  --marca-wash:   var(--accent-soft);
  --marca-glow:   var(--accent-glow);
  --marca-mesh:   var(--bg-mesh);

  /* ─── Aliases de compatibilidade (style.css existente) ──────────── */
  --color-bg:            var(--bg);
  --color-surface:       var(--surface);
  --color-surface-alt:   var(--surface-2);
  --color-border:        var(--line);
  --color-border-focus:  var(--line-strong);
  --color-text:          var(--ink);
  --color-text-muted:    var(--ink-soft);
  --color-text-xmuted:   var(--ink-muted);
  --color-accent:        var(--accent);
  --color-accent-hover:  var(--accent-hover);
  --color-accent-fg:     var(--accent-ink);
  --color-danger:        var(--st-reprovado);
  --color-danger-light:  var(--st-reprovado-bg);
  --color-warning:       var(--st-revisao);
  --color-warning-light: var(--st-revisao-bg);
  --color-success:       var(--st-aprovado);
  --color-success-light: var(--st-aprovado-bg);
  --color-info:          var(--accent);
  --color-info-light:    var(--accent-soft);
  /* espaçamentos legacy */
  --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3);
  --space-4: var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6);
  --space-8: var(--sp-6); --space-10: 40px; --space-12: var(--sp-7);
  --space-16: var(--sp-8);
  /* raios legacy */
  --radius-sm: var(--r-sm);   --radius-md:  var(--r-md);
  --radius-lg: var(--r-lg);   --radius-xl:  var(--r-xl);
  --radius-full: var(--r-pill);
  /* sombras legacy */
  --shadow-sm: var(--sh-1); --shadow-md: var(--sh-2); --shadow-lg: var(--sh-3);
  /* tipografia legacy */
  --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;
  --text-xs:   var(--t-label); --text-sm:   var(--t-sm);   --text-base: var(--t-body);
  --text-lg:   var(--t-h3);   --text-xl:   1.25rem;        --text-2xl:  var(--t-h2);
  --text-3xl:  var(--t-h1);
  --leading-tight:   var(--lh-tight);
  --leading-normal:  var(--lh-body);
  --leading-relaxed: 1.625;
  --transition-fast: var(--dur) var(--ease);
  --transition-base: var(--dur-lg) var(--ease);
  /* gradientes legados */
  --grad-surface:   linear-gradient(180deg, rgba(19,36,47,.56) 0%, rgba(14,28,38,0) 42%);
  --grad-surface-2: linear-gradient(180deg, rgba(27,48,60,.50) 0%, rgba(19,36,47,0) 46%);
  --grad-raise:     linear-gradient(180deg, rgba(255,255,255,.022) 0%, rgba(255,255,255,0) 38%);
  --line-hi:        var(--rim);
  --line-hi-soft:   rgba(255,255,255,.04);
}

/* ─── Reset mínimo ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--bg-mesh);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg  { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
::selection { background: var(--accent-soft); color: var(--ink-bright); }

/* ─── Foco visível acessível ──────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent-line) !important;
  border-radius: 6px;
}

/* ─── Grain de cinema — sobre o fundo de toda a app ─────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .018;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}