/*
 * Tokens. Cor, tipo, linha e espaço são os do sistema de design da POSS
 * (lab-poss-design-system, regras até 25/10): só token, nada à mão.
 * A grade: 12 colunas full width, margem que escala com a tela
 * (--u é um pixel do artboard de 1728) e calha fixa de 12px.
 */
:root {
  /* cor · acento */
  --color-accent: #FFAE0D;
  --color-accent-deep: #CC7D15;
  --color-on-accent: #090911;
  --color-accent-tint: rgba(255, 174, 13, .12);
  --color-hover: #A260FE;
  --glow-hover: rgba(162, 96, 254, .5);
  --color-on-hover: #fcfcfc;

  /* cor · escada de superfície */
  --color-bg: #090911;
  --color-surface: #0f0f17;
  --color-surface-2: #191921;
  --color-surface-3: #23232b;

  /* cor · linhas */
  --line-fio: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .10);
  --line-cruz: rgba(255, 255, 255, .20);
  --line-control: #72727A;

  /* cor · tinta */
  --color-ink-1: #fcfcfc;
  --color-ink-2: #edeeef;
  --color-ink-3: #dfe1e5;
  --color-ink-soft: #cfcfca;
  --color-mut: #a7a7aa;
  --color-dim: #8a8a8d;
  --color-ghost: #37373b;

  /* tipo · faces (kit Adobe dcf7kxl) */
  --font-display: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Helvetica Neue", "Inter Tight", Arial, sans-serif;
  --font-text: "neue-haas-grotesk-text", "Neue Haas Grotesk Text Pro", "Helvetica Neue", Arial, sans-serif;

  /* tipo · papéis */
  --fs-display: clamp(4.375rem, 14.95vw, 14.04rem); --fw-display: 200; --lh-display: .84; --tr-display: calc(-.0219em - .706px); --ws-display: .1em;
  --fs-frase: clamp(1.225rem, 1.736vw, 2.625rem); --fw-frase: 700; --lh-frase: 1.06; --tr-frase: -.004em; --ws-frase: .1433em;
  --fs-section: clamp(3rem, 9vw, 9rem); --fw-section: 200; --lh-section: .88; --tr-section: calc(-.0725em + 2.52px); --ws-section: .06em;
  /* o espaço entre palavras abre para compensar o tracking fechado, como no display e na section */
  --fs-subsection: clamp(2.25rem, 5.5vw, 5rem); --fw-subsection: 300; --lh-subsection: .92; --tr-subsection: -.03em; --ws-subsection: .08em;
  --fs-title: clamp(1.75rem, 4vw, 3rem); --fw-title: 400; --lh-title: .98; --tr-title: -.025em; --ws-title: .1em;
  --fs-card: clamp(1.25rem, 2.2vw, 1.75rem); --fw-card: 400; --lh-card: 1.15; --tr-card: -.015em; --ws-card: .08em;
  --fs-lede: clamp(1.125rem, 1.5vw, 1.5rem); --fw-lede: 400; --lh-lede: 1.4; --tr-lede: -.01em;
  --fs-body: 1rem; --lh-body: 1.55;
  --fs-caption: .875rem; --lh-caption: 1.45; --tr-caption: .01em;
  --fs-label: .75rem; --fw-label: 500; --lh-label: 1.2; --tr-label: .3em;

  /* grade da peça */
  --grid-fio: 1.5px;
  --grid-cruz: 16px;
  --grid-traco: 2px;
  --tx-dots: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72'><rect x='34' y='34' width='4' height='4' fill='%23ffffff' fill-opacity='0.11'/></svg>");

  /* forma e resposta */
  --radius-ctrl: 4px;
  --control-height: 44px;
  --motion-fast: 160ms;
  --motion-ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

  /* espaço · base 4 */
  --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-section: clamp(144px, 16.5vw, 240px);

  /* grade */
  --u: min(calc(100vw / 1728), .0625rem);
  --page-max: 108rem;
  --page-w: min(100vw, var(--page-max));
  --cols: 12;
  --margin: max(1.25rem, calc(80 * var(--u)));
  --gutter: .75rem;
  --col: calc((var(--page-w) - 2 * var(--margin) - (var(--cols) - 1) * var(--gutter)) / var(--cols));
  --span-2: calc(2 * var(--col) + var(--gutter));
  --page-left: max(0px, calc((100vw - var(--page-max)) / 2));

  /* camadas */
  --z-header: 20;
  --z-overlay: 900;
  --z-flip: 950;
  --z-preloader: 1000;

  /* carrossel */
  --cards-visible: 3.6;
  --card-ratio: 4 / 5;

  color-scheme: dark;
}

@media (max-width: 991px) {
  :root {
    --margin: 2rem;
    --cards-visible: 2.2;
  }
}

@media (max-width: 767px) {
  :root {
    --margin: 1.25rem;
    --cards-visible: 1.6;
  }
}

@media (max-width: 479px) {
  :root {
    --margin: 1rem;
    --cards-visible: 1.28;
  }
}