/* ==========================================================================
   IAN MATEUS ALVES — DESIGN SYSTEM "SESSÃO"  ·  v2.0
   Tokens. Nada de valor cru nos componentes: tudo sai daqui.

   Referência: sala de cinema apagada + mesa de recortes. Colagem de cartões
   iluminados boiando no escuro, tipografia cromada, grão em tudo.

   Regras duras do sistema:
     - o fundo NUNCA é liso: sempre tem grão por cima.
     - cartão é arredondado (28px), quente (off-white) e levemente torto.
     - sombra é difusa e longa, como objeto no escuro — nunca offset sólido.
     - uma cor quente só (dourado de ingresso). O resto é preto, off-white
       e cromado. A cor colorida da página vem das thumbnails dos vídeos.
   ========================================================================== */

:root {

  /* --- COR ---------------------------------------------------------------
     O preto não é #000: é levemente arroxeado, cor de sala com projetor
     ligado. O off-white não é #FFF: é quente, cor de papel fotográfico.  */

  --c-void:      #08070A;   /* fundo — sala apagada                       */
  --c-void-2:    #100E14;   /* bloco levantado sobre o fundo              */
  --c-void-3:    #191621;   /* borda e separador no escuro                */

  --c-card:      #F4F1EA;   /* cartão off-white quente                    */
  --c-card-2:    #E6E1D6;   /* segunda camada do cartão / rodapé dele     */
  --c-ink:       #16130F;   /* texto sobre cartão — 16.41:1, passa AAA    */
  --c-ink-soft:  #57524A;   /* secundário sobre cartão — 6.87:1, passa AA  */

  --c-paper:     #EFEBE3;   /* texto sobre o escuro — 16.90:1, passa AAA  */
  --c-paper-dim: #9A94A6;   /* secundário no escuro — 6.85:1, passa AA    */

  --c-gold:      #D4A72C;   /* dourado de ingresso — 8.96:1 no escuro     */
  /* O dourado claro sobre cartão off-white dá 1.99:1 e é ilegível. Esta é
     a versão escura para texto e ícone em cima do cartão: 6.07:1 no
     --c-card e 5.25:1 no --c-card-2. Nunca usar --c-gold ali.          */
  --c-gold-deep: #73560B;

  /* Cromado: a gradação que faz o título parecer metal polido.
     A ordem das paradas importa — o pulo claro/escuro no meio é o brilho. */
  --chrome: linear-gradient(
              177deg,
              #6E7789  0%,
              #C4CBD8 18%,
              #FFFFFF 33%,
              #FAFBFF 41%,
              #7C869B 52%,
              #55607A 58%,
              #AEB7C7 74%,
              #F2F5FA 88%,
              #808A9E 100%
            );

  /* Papéis semânticos — trocados por .on-card nos blocos claros */
  --fg:      var(--c-paper);
  --fg-dim:  var(--c-paper-dim);
  --line:    var(--c-void-3);

  /* --- TEXTURA -----------------------------------------------------------
     Duas camadas, sempre. Grão fino por cima de tudo (feTurbulence, em
     site.css) e halftone grande e macio no fundo das seções escuras.    */

  --grain-opacity:   0.055;
  --halftone-dot:    2px;
  --halftone-gap:    7px;
  --halftone-color:  rgba(239, 235, 227, 0.16);

  /* --- TIPOGRAFIA --------------------------------------------------------
     Fraunces  = display serifado retrô. Os eixos SOFT e WONK são o que
                 tira a cara de "serif de sistema" — SOFT arredonda o
                 terminal, WONK inclina a haste. Sem eles vira Georgia.
     Onest     = texto. Grotesca quente, não é a dupla óbvia de template.
     system-ui = SÓ nos elementos que imitam interface de sistema
                 (diálogo, barra do player). É o que os faz parecer reais. */

  --f-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --f-text:    "Onest", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-ui:      system-ui, -apple-system, "Segoe UI", sans-serif;

  --fr-soft: 100;   /* SOFT  — terminal arredondado                       */
  --fr-wonk: 1;     /* WONK  — itálico torto nos caracteres que têm       */

  /* Escala display */
  --t-hero:    clamp(3rem,   10.5vw, 9.5rem);
  --t-title:   clamp(2.25rem, 6vw,   4.75rem);
  --t-sub:     clamp(1.5rem,  3vw,   2.25rem);

  /* Escala texto */
  --t-lead:    clamp(1.0625rem, 1.05vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-label:   0.6875rem;   /* rótulo em caixa alta com tracking          */

  --lh-display: 0.94;
  --lh-text:    1.62;
  --ls-display: -0.022em;
  --ls-label:   0.16em;

  /* --- ESPAÇO ------------------------------------------------------------ */

  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4.5rem;
  --s-9: 7rem;     --s-10: 10rem;

  --sec-y:  clamp(4.5rem, 10vw, 10rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw:   1320px;

  /* --- FORMA -------------------------------------------------------------
     Arredondado de verdade. O raio grande é o que separa este sistema do
     anterior — se algo ficar de canto vivo, está fora do padrão.        */

  --r-card:  28px;
  --r-tile:  20px;
  --r-pill:  999px;
  --r-ui:    14px;    /* raio dos elementos que imitam interface          */

  /* Sombra difusa e longa: objeto claro suspenso no escuro. */
  --sh-card:  0 2px 4px rgba(0,0,0,.4), 0 24px 48px -16px rgba(0,0,0,.75);
  --sh-lift:  0 4px 8px rgba(0,0,0,.45), 0 44px 80px -24px rgba(0,0,0,.85);
  --sh-ui:    0 1px 2px rgba(0,0,0,.35), 0 12px 28px -10px rgba(0,0,0,.7);

  /* Brilho quente atrás dos cartões — luz de projetor, não "glow de SaaS" */
  --halo: radial-gradient(60% 60% at 50% 40%, rgba(212,167,44,.14), transparent 70%);

  /* --- MOVIMENTO ---------------------------------------------------------
     A abertura é a headline saindo do desfoque. Depois dela, o vocabulário
     é um só: as coisas CAEM e ASSENTAM (tilt + overshoot), como recorte
     jogado na mesa. Nada de fade-up, nada de deslizar reto de baixo.    */

  --d-settle:  620ms;   /* cartão caindo e assentando                     */
  --d-cut:     180ms;   /* estado de hover                                */
  --d-shimmer: 1400ms;  /* brilho varrendo o cromado                      */

  /* Abertura, em sequência — headline saindo do desfoque e, quando a última
     letra entrou, o cromado. Encadeados: juntos viram ruído.            */
  --d-reveal:  780ms;   /* uma letra saindo do desfoque                   */
  --d-seg:      52ms;   /* passo entre letras (13 caixas ≈ 620ms no total) */
  --d-chrome:  1.15s;   /* o brilho só varre depois da última letra       */

  /* Assinatura: 14 glifos. Total ≈ 0.62 + 13 × 0.13 ≈ 2.3s.            */
  --d-sig:      620ms;
  --d-sig-step: 130ms;

  --e-settle: cubic-bezier(0.18, 1.16, 0.32, 1);   /* passa e volta       */
  --e-soft:   cubic-bezier(0.32, 0.72, 0, 1);
  --e-cut:    cubic-bezier(0.4, 0, 0.2, 1);

  --tilt-a: -2.4deg;   /* as três inclinações permitidas nos cartões      */
  --tilt-b:  1.8deg;
  --tilt-c: -1.1deg;

  /* --- CAMADA ------------------------------------------------------------ */

  --z-strip:    5;
  --z-header:   50;
  --z-modal:    90;
}

/* --- BLOCO CLARO ----------------------------------------------------------
   Dentro de um cartão off-white os papéis semânticos invertem.         */

.on-card {
  --fg:     var(--c-ink);
  --fg-dim: var(--c-ink-soft);
  --line:   rgba(22, 19, 15, 0.14);
}

/* --- INCLINAÇÕES ----------------------------------------------------------
   Três ângulos, e só três. Cartão torto é charme; cartão com ângulo
   aleatório vira sujeira.                                              */

.tilt-a { --tilt: var(--tilt-a); }
.tilt-b { --tilt: var(--tilt-b); }
.tilt-c { --tilt: var(--tilt-c); }