/* Tokens — identidade v2 do Coyote Clipper.
   Fonte única de verdade para cor, tipo, medida e tempo. Nada de valor solto
   nos outros arquivos. Um tema só, escuro: não existe tema claro.
   Valores de handoff-identidade-v2/TOKENS.md; de-para em MIGRACAO.md. */

/* Fontes da interface, servidas pelo próprio app (sem rede). Pasta própria:
   /fonts/ já é a rota da TikTok Sans, que é do vídeo. */
@import url("/ui-fonts/fontes.css");

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------- superfície */
  /* Três níveis de elevação bastam. Profundidade vem de fundo + borda de 1px,
     nunca de blur ou sombra difusa. */
  --bg-sunken: #08080A;           /* fundo de timeline, estado vazio */
  --bg: #0B0B0C;                  /* fundo de toda tela */
  --bg-panel: #0E0E10;            /* painel lateral, seção, topbar */
  --e1: #141417;                  /* cartão, campo, barra */
  --e2: #1A1A1E;                  /* botão em repouso */
  --e3: #242429;                  /* hover, toggle ligado */
  --line: #26262A;                /* divisória */
  --line-soft: #1E1E22;           /* borda de topbar e rodapé (referência v2) */
  --line-strong: #34343A;         /* borda de controle */

  /* ---------------------------------------------- tinta (contraste vs --bg) */
  --ink: #F4F3F1;                 /* 17,4:1 — título, valor */
  --ink-body: #C9C7C2;            /* 11,2:1 — corpo */
  --ink-soft: #8E8C87;            /*  5,6:1 — apoio, legenda */
  --ink-dim: #6A6862;             /*  3,4:1 — rótulo, só >= 10,5px */

  /* -------------------------------------------------------- acento e estado */
  --accent: #E08427;              /* 6,3:1 — seleção, playhead, ação primária */
  --accent-hover: #EA9642;
  --accent-ink: #140A02;          /* 9,8:1 sobre âmbar */
  --accent-wash: #2A1C0C;         /* clipe/bloco selecionado */
  --accent-wash-line: #4A3313;
  --focus-ring: rgba(224, 132, 39, .2);
  --ok: #7FA46B;                  /* 8,0:1 — pronto */
  --warn: #E0B24A;                /* 9,9:1 — pendência. NÃO é o acento. */
  --err: #C8553D;                 /* 4,8:1 — falha de render */

  /* desabilitado */
  --off-bg: #1A1A1E;
  --off-line: #26262A;
  --off-ink: #6A6862;

  /* A guia de centro do arraste é azul como no editor do TikTok: só aparece
     com o dedo ou o mouse segurando o texto, e não pode ser confundida com
     seleção (âmbar). */
  --snap-guia: #2D9CFF;

  /* controle deslizante */
  --slider-track: #26262A;
  --slider-fill: #6A6862;
  --slider-thumb: #F4F3F1;

  /* ------------------------------------------- tags por campo — pastel escuro */
  /* A cor identifica o campo, nunca o estado. Valor sempre em --ink. */
  --tag-store-bg: #16202C;   --tag-store-line: #29394C;   --tag-store-lab: #9DBEE0;
  --tag-product-bg: #17201A; --tag-product-line: #2C3E2E; --tag-product-lab: #A6C892;
  --tag-price-bg: #221B10;   --tag-price-line: #3F3421;   --tag-price-lab: #DFC189;
  --tag-final-bg: #1C1828;   --tag-final-line: #342D48;   --tag-final-lab: #BCA9DE;
  --tag-val: #F4F3F1;

  /* ------------------------------------------------------------ tipografia */
  /* Space Grotesk só título. IBM Plex Sans toda a interface. IBM Plex Mono só
     número, sempre tabular. TikTok Sans NÃO é da interface: só o texto dentro
     do vídeo e na prévia dele. */
  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

  /* escala: font shorthand + tracking separado */
  --t-display-xl: 700 88px/1.02 var(--font-display);  --t-display-xl-tr: -.035em;
  --t-display-l: 700 60px/1.05 var(--font-display);   --t-display-l-tr: -.03em;
  --t-display-m: 600 40px/1.1 var(--font-display);    --t-display-m-tr: -.02em;
  --t-title: 600 26px/1.2 var(--font-display);        --t-title-tr: -.015em;
  --t-panel: 600 20px/1.25 var(--font-display);
  --t-lead: 400 17px/1.55 var(--font-ui);
  --t-body: 400 15px/1.6 var(--font-ui);
  --t-label: 500 13px/1.4 var(--font-ui);
  --t-section: 500 10.5px/1.2 var(--font-mono);       --t-section-tr: .1em;
  --t-mono: 400 12.5px/1.4 var(--font-mono);
  --t-mono-l: 500 16px/1.3 var(--font-mono);

  /* ------------------------------------------------ texto desenhado no vídeo */
  --hook-size: 71;                /* px em 1080x1920, escala 82% */
  --hook-scale: .82;
  --hook-stroke: 5;               /* faixa 0-25 */
  --hook-fill: #FFFFFF;
  --hook-stroke-col: #000000;

  /* ------------------------------------------------------ espaço (base 4) */
  /* Escala da v2. */
  --s1: 4px;   /* dentro de chip */
  --s2: 8px;   /* ícone e rótulo */
  --s3: 12px;  /* linha de lista */
  --s4: 16px;  /* dentro de cartão */
  --s5: 24px;  /* entre cartões */
  --s6: 32px;  /* bloco */
  --s7: 56px;  /* seção do app */
  --s8: 80px;  /* folha */
  --s9: 120px; /* seção da landing */
  /* Escala de densidade dos controles, que o MIGRACAO.md mantém válida. */
  --s-1: 4px;  --s-2: 6px;  --s-3: 8px;  --s-4: 10px; --s-5: 12px;
  --s-6: 16px; --s-7: 24px; --s-8: 32px; --s-9: 48px; --s-10: 56px;

  /* ---------------------------------------------------------------- raio */
  /* Máximo 5. Pílula só no CTA da landing. */
  --r-sm: 2px;                    /* clipe */
  --r-md: 3px;                    /* frame */
  --r-lg: 4px;                    /* controle */
  --r-xl: 5px;                    /* cartão, popover */

  /* ------------------------------------------------- alturas e proporções */
  --h-ctrl-w: 36px;               /* controle do wizard */
  --h-ctrl-card: 34px;            /* dentro de cartão */
  --h-seg-item: 32px;
  --h-seg-rail: 40px;
  --h-add: 36px;
  --h-ctrl-e: 28px;               /* controle do editor */
  --h-ctrl-tl: 24px;              /* barra da timeline */
  --h-value-box: 24px;
  --wd-value-box: 52px;
  --h-bar-top: 64px;              /* topbar do wizard */
  --h-bar-bottom: 56px;           /* rodapé do wizard */
  --h-topbar-e: 48px;             /* topbar do editor */
  --h-section: 30px;              /* cabeçalho de seção */
  --h-tl-bar: 36px;
  --h-ruler: 22px;
  --h-track-src: 78px;
  --h-track-out: 100px;
  --h-track-foot: 20px;
  --h-row: 38px;                  /* linha de lista */
  --timeline-h: 300px;
  --ar-video: 9 / 16;             /* todo player e toda prévia, sem exceção */

  /* celular */
  --h-m-header: 52px;
  --h-m-action: 56px;
  --m-margin: 20px;
  --h-touch: 44px;

  /* larguras */
  --wd-panel-e: 380px;
  --wd-preview-step2: 620px;         /* referência v2 (o MIGRACAO citava 520) */
  --wd-track-head: 132px;

  /* ----------------------------------------------------------- transições */
  --t-fast: 90ms;                 /* hover, foco */
  --t-base: 140ms;                /* seleção, segmented, popover, tag */
  --t-step: 200ms;                /* troca de step (fade + 8px) */
  --t-ease: cubic-bezier(.2, 0, .2, 1);
}

@media (max-width: 1439px) {
  :root { --wd-panel-e: 320px; }
}
@media (min-width: 2200px) {
  :root { --wd-track-head: 184px; }
}

/* Fundo liso em todo lugar, inclusive atrás do que ainda não pintou. */
html, body { background: var(--bg); color: var(--ink); }

/* Todo número da interface é tabular. */
.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Foco por teclado sempre visível: borda 1.5px âmbar + anel 3px. Nunca só
   mudança de fundo — os atalhos são parte da interface. */
:where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 1.5px solid var(--accent);   /* por dentro: vira a borda de 1,5px */
  outline-offset: -1.5px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Movimento reduzido: as transições por token somem. Animação que carrega
   informação troca de forma em cada componente (o crossfade do Embaralhar, a
   barra determinística do preparo), não por uma trava global. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; --t-step: 1ms; }
}