/* GTA VI — tokens extraídos do CSS de produção de rockstargames.com/VI (2026-09-30).
   Os nomes das variáveis no original são ofuscados (--_1nfc5st*, --jhqn1x*). Os nomes abaixo são nossos.
   ponytail: só a camada de tokens; componentes ficam pra quando o projeto existir. */

/* ---------- Fontes ---------- */
/* GTA Art Deco é proprietária da Rockstar (sem licença pública). Alternativas livres no DESIGN.md. */
:root {
  --font-display: "ArtDecoCondensedBold", "Bebas Neue", "Oswald", sans-serif;   /* títulos, uppercase, lh .9 */
  --font-display-heavy: "ArtDecoCondensedHeavy", "Anton", sans-serif;          /* 900 */
  --font-deco: "ArtDecoBold", "Josefin Sans", sans-serif;                       /* 700 */
  --font-deco-medium: "ArtDecoMedium", "Josefin Sans", sans-serif;              /* 500 */
  --font-deco-regular: "ArtDecoRegular", "Josefin Sans", sans-serif;            /* 400, eyebrow com tracking .3em */
  --font-text: "Helvetica Now Text", "Helvetica Neue", Arial, sans-serif;       /* corpo, UI da Rockstar */
  --font-ui-display: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Tipografia fluida (vw, travada em 2560px) ---------- */
  --vw-cap: 2560px;
  --fs-1:  min(0.5vw, calc(var(--vw-cap) * .005));
  --fs-2:  min(1vw,   calc(var(--vw-cap) * .01));
  --fs-3:  min(1.5vw, calc(var(--vw-cap) * .015));
  --fs-4:  min(2vw,   calc(var(--vw-cap) * .02));
  --fs-5:  min(2.5vw, calc(var(--vw-cap) * .025));
  --fs-6:  min(3vw,   calc(var(--vw-cap) * .03));
  --fs-8:  min(4vw,   calc(var(--vw-cap) * .04));
  --fs-10: min(5vw,   calc(var(--vw-cap) * .05));
  --fs-12: min(6vw,   calc(var(--vw-cap) * .06));
  --fs-16: min(8vw,   calc(var(--vw-cap) * .08));
  --fs-20: min(10vw,  calc(var(--vw-cap) * .1));

  /* Escala fixa da UI "Foundry" (design system da Rockstar) */
  --fs-ui-10: 10px; --fs-ui-12: 12px; --fs-ui-14: 14px; --fs-ui-16: 16px; --fs-ui-18: 18px;
  --fs-ui-20: 20px; --fs-ui-24: 24px; --fs-ui-32: 32px; --fs-ui-40: 40px; --fs-ui-48: 48px;
  --fs-ui-56: 56px; --fs-ui-64: 64px; --fs-ui-72: 72px; --fs-ui-80: 80px; --fs-ui-88: 88px;

  --lh-display: .9;
  --lh-100: 100%; --lh-110: 110%; --lh-120: 120%; --lh-130: 130%; --lh-150: 150%;

  --ls-neg-250: -.025em; --ls-neg-150: -.015em; --ls-neg-100: -.01em; --ls-neg-75: -.0075em;
  --ls-neg-50: -.005em; --ls-0: 0; --ls-25: .0025em; --ls-100: .01em; --ls-200: .02em;
  --ls-250: .025em; --ls-eyebrow: .3em;

  /* ---------- Espaçamento (Foundry, base 8 com meios-passos) ---------- */
  --space-25: 2px;  --space-50: 4px;  --space-75: 6px;  --space-100: 8px;  --space-125: 10px;
  --space-150: 12px; --space-200: 16px; --space-250: 20px; --space-300: 24px; --space-400: 32px;
  --space-500: 40px; --space-600: 48px; --space-800: 64px; --space-1000: 80px; --space-1200: 96px;
  --space-1600: 128px; --space-2000: 160px; --space-2400: 192px; --space-3000: 240px;

  /* ---------- Raios ---------- */
  --radius-0: 0; --radius-25: 2px; --radius-50: 4px; --radius-100: 8px; --radius-150: 12px;
  --radius-200: 16px; --radius-300: 24px; --radius-400: 32px; --radius-pill: 1000px; --radius-circle: 9999px;

  /* ---------- Movimento ---------- */
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);   /* o mais usado */
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-in-out-expo: cubic-bezier(.65, .05, .36, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);          /* fades de 1s */
  --ease-material: cubic-bezier(.4, 0, .2, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-fast: .15s; --dur-ui: .2s; --dur-ui-slow: .25s; --dur-reveal: 1s;

  /* ---------- Efeitos ---------- */
  --blur-sm: blur(6.25px); --blur-md: blur(13px); --blur-lg: blur(25px);
  --glow-bloom: blur(150px) brightness(1.2) saturate(2.5);    /* atrás das imagens: luz ambiente da cena */
  --glow-pink: 0 0 0 28px #ffb2c652, 0 0 110px #ffb2c666;
  --shadow-card: 0 0 0 2px #00000026, 0 8px 24px #00000059;
  --shadow-modal: 0 0 0 2px #00000059, 0 16px 56px #00000059;

  /* ---------- Cores globais ---------- */
  --black: #000;
  --white: #fff;
  --off-white: #fdfdfd;
  --pink: #f976b0;               /* rosa-assinatura da UI (botões, destaques) */
  --gray-900: #1d1d23; --gray-800: #29292e; --gray-700: #313137;

  /* Título-herói: gradiente pôr do sol aplicado no texto */
  --hero-title-gradient: radial-gradient(circle at 50% -30vh, #ffd687 0, #fc5243 50vh, #9d2f6a 90vh, #201f4200 150vh);

  /* Máscaras de vinheta, usadas em cima de fotos e vídeos */
  --fade-bottom: linear-gradient(#000 60%, #0000004d 80%, #0000 100%);
  --fade-left: linear-gradient(90deg, #000 30%, #0000004d 72%, #0000 100%);

  /* ---------- Breakpoints (referência, CSS não aceita var em @media) ----------
     mobile < 768 (portrait/landscape tratados à parte) · tablet 768–1023 · desktop ≥ 768
     wide ≥ 1440 · xl ≥ 1920 · ultrawide min-aspect-ratio 2.25 · pointer:coarse */
}

/* ---------- 6 temas de seção ----------
   Cada seção do site troca o tema inteiro: escala de 22 tons (do mais escuro ao mais claro),
   gradiente de fundo (189deg) e gradiente do título (radial, aplicado com background-clip:text). */
.theme-dusk {     /* índigo + dourado → coral → magenta (o "pôr do sol de Vice City") */
  --t-01:#070810;--t-02:#0c0d1b;--t-03:#111222;--t-04:#18182d;--t-05:#1f1f38;--t-06:#252644;--t-07:#2f2e52;--t-08:#38365d;
  --t-09:#433f6a;--t-10:#4e4a7b;--t-11:#5a5589;--t-12:#655f97;--t-13:#726aa7;--t-14:#7f75b5;--t-15:#8b80c2;--t-16:#988bd0;
  --t-17:#a596db;--t-18:#b1a1e8;--t-19:#c1b3f0;--t-20:#ccc2f5;--t-21:#d9d1f6;--t-22:#e5ddff;
  --t-bg: linear-gradient(189deg, #1f1f38 .55%, #18182d 30.38%, #111222 65.19%, #0c0d1b 100%);
  --t-title: radial-gradient(62.79% 100% at 50% 0%, #ffdf80 0%, #f4717c 50%, #e963c7 100%);
}
.theme-orchid {   /* ameixa/rosa + amarelo → rosa → pink */
  --t-01:#090711;--t-02:#0f0c1a;--t-03:#16111f;--t-04:#1e1728;--t-05:#271c33;--t-06:#31223e;--t-07:#3f284b;--t-08:#4b2f54;
  --t-09:#583660;--t-10:#6a3e6c;--t-11:#78487a;--t-12:#855381;--t-13:#955d8d;--t-14:#a46798;--t-15:#b272a1;--t-16:#c07eaa;
  --t-17:#ce89b2;--t-18:#da96ba;--t-19:#e6a9c6;--t-20:#f1b8cc;--t-21:#f2cbd3;--t-22:#fbd9e0;
  --t-bg: linear-gradient(189deg, #2d1f36 .55%, #1e1728 30.38%, #16111f 65.19%, #0f0c1a 100%);
  --t-title: radial-gradient(62.79% 100% at 50% 0%, #ff9 0%, #f5899b 50%, #e963bc 100%);
}
.theme-night {    /* azul-noite + azul-céu → lavanda → violeta */
  --t-01:#08080f;--t-02:#0d0c1a;--t-03:#111127;--t-04:#151732;--t-05:#1c1e40;--t-06:#21254c;--t-07:#262e5b;--t-08:#2c3868;
  --t-09:#324275;--t-10:#394e84;--t-11:#415b93;--t-12:#47679f;--t-13:#4f74ad;--t-14:#5981b6;--t-15:#648dc2;--t-16:#6e9bcb;
  --t-17:#78a6d7;--t-18:#84b3df;--t-19:#92c4eb;--t-20:#a5d1ef;--t-21:#b6ddf3;--t-22:#cae9f7;
  --t-bg: linear-gradient(189deg, #16203f .55%, #151732 30.38%, #111127 65.19%, #0d0c1a 100%);
  --t-title: radial-gradient(62.79% 100% at 50% 0%, #9cf 0%, #9b89f5 50%, #d263e9 100%);
}
.theme-ember {    /* vinho/terracota + pêssego → salmão → rosa */
  --t-01:#0b070e;--t-02:#110b18;--t-03:#1b0e1e;--t-04:#251229;--t-05:#321532;--t-06:#3e1a37;--t-07:#4d203e;--t-08:#5b2742;
  --t-09:#6b2e47;--t-10:#7c364f;--t-11:#8d4053;--t-12:#9c4958;--t-13:#ae535b;--t-14:#bd5f5e;--t-15:#c86b69;--t-16:#d27b74;
  --t-17:#da8a7f;--t-18:#e2998a;--t-19:#efaa9c;--t-20:#f6baab;--t-21:#f9cabc;--t-22:#fadcce;
  --t-bg: linear-gradient(189deg, #321532 .55%, #251229 30.38%, #1b0e1e 65.19%, #110b18 100%);
  --t-title: radial-gradient(62.79% 100% at 50% 0%, #fc9 0%, #f59289 50%, #e9639b 100%);
}
.theme-lagoon {   /* petróleo/oceano + menta → água → azul */
  --t-01:#08080f;--t-02:#0d0c1a;--t-03:#111126;--t-04:#161733;--t-05:#1a1f3c;--t-06:#1f2747;--t-07:#243152;--t-08:#273c5c;
  --t-09:#2b4769;--t-10:#315573;--t-11:#32637d;--t-12:#347086;--t-13:#3e7d92;--t-14:#438b9e;--t-15:#4d96a9;--t-16:#54a5b3;
  --t-17:#62b0c0;--t-18:#6ebdc5;--t-19:#7ecdd3;--t-20:#8cdadd;--t-21:#a2e5e6;--t-22:#b8f0ea;
  --t-bg: linear-gradient(189deg, #142242 .55%, #161733 30.38%, #111126 65.19%, #0d0c1a 100%);
  --t-title: radial-gradient(62.79% 100% at 50% 0%, #9fa 0%, #89f5e3 50%, #799fec 100%);
}
.theme-glades {   /* verde-mangue + lima → laranja → coral */
  --t-01:#040a0c;--t-02:#071012;--t-03:#0d1516;--t-04:#0f1e1d;--t-05:#162623;--t-06:#1a2e29;--t-07:#243830;--t-08:#294235;
  --t-09:#314d3d;--t-10:#3a5a44;--t-11:#43674b;--t-12:#4d7253;--t-13:#597f59;--t-14:#678b63;--t-15:#719768;--t-16:#7fa36f;
  --t-17:#8eae77;--t-18:#9eb982;--t-19:#b3c694;--t-20:#c2d2a2;--t-21:#d1ddb0;--t-22:#e1e7c7;
  --t-bg: linear-gradient(189deg, #142e25 .55%, #0f1e1d 30.38%, #0d1516 65.19%, #071012 100%);
  --t-title: radial-gradient(62.79% 100% at 50% 0%, #ef9 0%, #f5c089 50%, #f47187 100%);
}

/* Uso básico dos tokens */
.section { background: var(--t-bg); color: var(--t-22); }
.title {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--lh-display);
  background-image: var(--t-title);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eyebrow { font-family: var(--font-deco-regular); letter-spacing: var(--ls-eyebrow); line-height: 1.2; text-transform: uppercase; }