/* ==========================================================================
   GTV+ (Global TV+) — Design System v1.0
   Tokens + base + componentes em um único arquivo.

   Como usar:
   1. Carregue as fontes (veja GTV-design-system.md, seção "Início rápido").
   2. <link rel="stylesheet" href="gtv.css">
   3. Tema escuro é o padrão. Para o claro: <html data-theme="light">.

   Organização:
   1. Primitivos (paleta bruta) — não use direto em componentes
   2. Tokens semânticos por tema — USE ESTES
   3. Tipografia, espaçamento, cantos, sombras, movimento
   4. Base (reset leve, texto, links, foco)
   5. Componentes (.btn, .input, .badge, .chip, .card, .alert, .container)

   Breakpoints (variáveis CSS não funcionam em @media, então copie os valores):
   sm 480px · md 768px · lg 1024px · xl 1280px
   ========================================================================== */


/* 1. PRIMITIVOS ------------------------------------------------------------ */
:root {
  /* Azul — a marca é o 500 */
  --gtv-blue-50:  #EBF5FF;
  --gtv-blue-100: #D6EAFF;
  --gtv-blue-200: #B0D8FF;
  --gtv-blue-300: #86C1FF;
  --gtv-blue-400: #53A4FF;
  --gtv-blue-500: #0384F6; /* Azul Global */
  --gtv-blue-600: #006CD8;
  --gtv-blue-700: #0055B3;
  --gtv-blue-800: #00408A;
  --gtv-blue-900: #002C63;
  --gtv-blue-950: #00193E;

  /* Amarelo — a marca é o 400 */
  --gtv-yellow-50:  #FCFCE5;
  --gtv-yellow-100: #F9F9CA;
  --gtv-yellow-200: #F9F694;
  --gtv-yellow-300: #FCF65C;
  --gtv-yellow-400: #FEF523; /* Amarelo Plus */
  --gtv-yellow-500: #DED836;
  --gtv-yellow-600: #B9B427;
  --gtv-yellow-700: #8F8A23;
  --gtv-yellow-800: #696621;
  --gtv-yellow-900: #4C4A18;

  /* Ink — neutros azulados (o 950 é o preto da logo) */
  --gtv-ink-50:  #F4F7FB; /* Gelo */
  --gtv-ink-100: #E4E9F1;
  --gtv-ink-200: #CBD3E0;
  --gtv-ink-300: #A9B4C6;
  --gtv-ink-400: #7F8BA0;
  --gtv-ink-500: #5B6D90;
  --gtv-ink-600: #3A4A69;
  --gtv-ink-700: #26334D;
  --gtv-ink-800: #1B2740;
  --gtv-ink-850: #121B2C;
  --gtv-ink-900: #0B1220;
  --gtv-ink-950: #05080F; /* Ink */

  /* Apoio da logo colorida (use só em selos e detalhes) */
  --gtv-cyan-400: #01D2FD;
  --gtv-blue-deep: #015EFD;
  --gradient-seal: linear-gradient(135deg, #01D2FD 0%, #0384F6 45%, #015EFD 100%);
  --gradient-live: linear-gradient(135deg, #01D2FD 0%, #0384F6 60%);
}


/* 2. TOKENS SEMÂNTICOS POR TEMA -------------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:             var(--gtv-ink-950);
  --surface:        var(--gtv-ink-900);
  --surface-raised: var(--gtv-ink-850);
  --surface-hover:  var(--gtv-ink-800);
  --border:         var(--gtv-ink-700);
  --border-strong:  var(--gtv-ink-500);  /* bordas de campos (>= 3:1) */

  --text:        var(--gtv-ink-50);
  --text-muted:  var(--gtv-ink-300);
  --text-subtle: var(--gtv-ink-400);     /* só sobre --bg e --surface */

  --primary:          var(--gtv-blue-600);
  --primary-hover:    var(--gtv-blue-700);
  --primary-active:   var(--gtv-blue-800);
  --primary-contrast: #FFFFFF;

  --accent:          var(--gtv-yellow-400);
  --accent-hover:    var(--gtv-yellow-300);
  --accent-active:   var(--gtv-yellow-500);
  --accent-contrast: var(--gtv-ink-950);

  --link:       var(--gtv-blue-400);
  --link-hover: var(--gtv-blue-300);
  --focus:      var(--gtv-blue-400);

  --success: #2BD17E;
  --warning: #FFB020;
  --danger:  #FF6B7A;
  --info:    var(--gtv-blue-400);

  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 24px 64px rgba(0, 0, 0, 0.6);
  --glow-primary: 0 0 0 1px var(--gtv-blue-500), 0 8px 32px rgba(3, 132, 246, 0.35);
}

[data-theme="light"] {
  color-scheme: light;

  --bg:             var(--gtv-ink-50);
  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-hover:  var(--gtv-ink-100);
  --border:         var(--gtv-ink-200);
  --border-strong:  var(--gtv-ink-500);

  --text:        var(--gtv-ink-950);
  --text-muted:  var(--gtv-ink-600);
  --text-subtle: var(--gtv-ink-500);

  --primary:          var(--gtv-blue-600);
  --primary-hover:    var(--gtv-blue-700);
  --primary-active:   var(--gtv-blue-800);
  --primary-contrast: #FFFFFF;

  /* Amarelo sobre fundo claro quase não aparece: use só dentro de peças escuras
     (selo +, faixas Ink) ou como botão com texto Ink. */
  --accent:          var(--gtv-yellow-400);
  --accent-hover:    var(--gtv-yellow-300);
  --accent-active:   var(--gtv-yellow-500);
  --accent-contrast: var(--gtv-ink-950);

  --link:       var(--gtv-blue-700);
  --link-hover: var(--gtv-blue-800);
  --focus:      var(--gtv-blue-700);

  --success: #0B7A45;
  --warning: #8A5100;
  --danger:  #C81E36;
  --info:    var(--gtv-blue-700);

  --shadow-1: 0 8px 24px rgba(5, 8, 15, 0.10);
  --shadow-2: 0 24px 64px rgba(5, 8, 15, 0.18);
  --glow-primary: 0 0 0 1px var(--gtv-blue-500), 0 8px 32px rgba(3, 132, 246, 0.25);
}


/* 3. TIPOGRAFIA, ESPAÇO, CANTOS, MOVIMENTO --------------------------------- */
:root {
  --font-display: 'Archivo', 'Arial Black', Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala fluida: celular (375px) -> computador (1280px) */
  --text-display: clamp(2.5rem,  1.671rem + 3.536vw, 4.5rem);   /* 40 -> 72 */
  --text-h1:      clamp(2.25rem, 1.731rem + 2.21vw,  3.5rem);   /* 36 -> 56 */
  --text-h2:      clamp(1.75rem, 1.439rem + 1.326vw, 2.5rem);   /* 28 -> 40 */
  --text-h3:      clamp(1.375rem, 1.219rem + 0.663vw, 1.75rem); /* 22 -> 28 */
  --text-h4:      clamp(1.125rem, 1.021rem + 0.442vw, 1.375rem);/* 18 -> 22 */
  --text-lg:   1.125rem;   /* 18 */
  --text-base: 1rem;       /* 16 */
  --text-sm:   0.875rem;   /* 14 */
  --text-xs:   0.75rem;    /* 12 (mínimo) */

  /* Espaçamento (base 4px) */
  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 0.75rem;  /*  12 */
  --space-4: 1rem;     /*  16 */
  --space-5: 1.5rem;   /*  24 */
  --space-6: 2rem;     /*  32 */
  --space-7: 3rem;     /*  48 */
  --space-8: 4rem;     /*  64 */
  --space-9: 6rem;     /*  96 */
  --space-10: 8rem;    /* 128 */

  /* Cantos */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Movimento */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-enter: 480ms;

  /* Camadas */
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}


/* 4. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--text-base)/1.625 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0; color: var(--text); text-wrap: balance; }

h1, .t-display {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
}
h1 { font-size: var(--text-h1); }
.t-display { font-size: var(--text-display); }

h2 {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-h2);
  line-height: 1.1;
}
h3 {
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1.2;
}
h4 {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: var(--text-h4);
  line-height: 1.3;
}

p { margin: 0; text-wrap: pretty; }
.t-lg { font-size: var(--text-lg); line-height: 1.6; }
.t-sm { font-size: var(--text-sm); line-height: 1.5; }
.t-xs { font-size: var(--text-xs); line-height: 1.4; font-weight: 500; }
.t-muted { color: var(--text-muted); }
.t-subtle { color: var(--text-subtle); }
.t-mono { font-family: var(--font-mono); }
.t-num { font-variant-numeric: tabular-nums; }

.overline {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--link);
}

a { color: var(--link); text-underline-offset: 0.2em; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection { background: var(--gtv-blue-500); color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 5. COMPONENTES ----------------------------------------------------------- */

/* Contêiner e seção */
.container {
  width: 100%;
  max-width: 80rem; /* 1280px */
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.section { padding-block: clamp(var(--space-7), 7vw, var(--space-9)); }
.section + .section { border-top: 1px solid var(--border); }

/* Botões ------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;                 /* 48px: acima do alvo mínimo de toque */
  padding: 0 var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font: 600 0.9375rem/1.25 var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

.btn--primary { background: var(--primary); color: var(--primary-contrast); }
.btn--primary:hover { background: var(--primary-hover); color: var(--primary-contrast); }
.btn--primary:active { background: var(--primary-active); }

.btn--plus { background: var(--accent); color: var(--accent-contrast); }
.btn--plus:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.btn--plus:active { background: var(--accent-active); }

.btn--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-hover); border-color: var(--text-muted); color: var(--text); }
.btn--secondary:active { background: var(--border); }

.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn--danger { background: var(--danger); color: var(--gtv-ink-950); }

.btn--sm { min-height: 2.25rem; padding: 0 var(--space-4); font-size: var(--text-sm); } /* só computador */
.btn--lg { min-height: 3.5rem; padding: 0 var(--space-6); font-size: 1.0625rem; }
.btn--icon { width: 3rem; padding: 0; }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--surface-hover);
  color: var(--text-subtle);
  border-color: transparent;
  cursor: not-allowed;
}
.btn--secondary[disabled], .btn--secondary[aria-disabled="true"] {
  background: transparent;
  border-color: var(--border);
}

/* Campos ------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.label { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.hint  { font-size: 0.8125rem; color: var(--text-muted); }
.error-text {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 0.8125rem; color: var(--danger);
}

.input, .select, .textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--space-4);
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: 400 var(--text-base)/1.5 var(--font-body);   /* 16px evita zoom no iOS */
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.textarea { padding-block: var(--space-3); min-height: 7rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.input:disabled, .select:disabled, .textarea:disabled {
  border-color: var(--border);
  color: var(--text-subtle);
  cursor: not-allowed;
}
input[type="checkbox"], input[type="radio"] {
  width: 1.375rem; height: 1.375rem; margin: 0;
  accent-color: var(--gtv-blue-500);
}

/* Selos e chips ------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
  height: 1.625rem; padding: 0 0.625rem;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.badge--live { background: var(--gradient-live); color: var(--gtv-ink-950); }
.badge--live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.badge--new  { background: var(--gtv-yellow-400); color: var(--gtv-ink-950); }
.badge--plus { background: var(--gtv-ink-800); color: var(--gtv-yellow-400); border-radius: var(--radius-sm); }
.badge--outline {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-stretch: 100%; font-weight: 500; letter-spacing: 0;
}

.chip {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0 1.25rem;
  border: 1.5px solid var(--gtv-ink-600);
  border-radius: var(--radius-full);
  background: transparent; color: var(--text);
  font: 600 0.9375rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
[data-theme="light"] .chip { border-color: var(--border-strong); }
.chip:hover { background: var(--surface-hover); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }

/* Cards -------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.card--interactive:hover,
.card--interactive:focus-visible { border-color: var(--gtv-blue-500); box-shadow: var(--glow-primary); }
.card--featured { border-color: var(--gtv-blue-500); box-shadow: var(--glow-primary); }
.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-raised);
  display: flex; align-items: center; justify-content: center;
}
.card__media--poster { aspect-ratio: 2 / 3; }
.card__media > img { width: 100%; height: 100%; object-fit: cover; }
.card__badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.card__title { font-size: 1.0625rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.card__meta  { font-size: var(--text-sm); color: var(--text-muted); }
.progress { height: 4px; border-radius: 2px; background: var(--border); margin-top: var(--space-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--gtv-blue-500); }

.card--plan { border-radius: var(--radius-xl); padding: var(--space-6); gap: var(--space-5); }
.card--plan.card--featured { background: var(--surface); }

/* Avisos ------------------------------------------------------------------- */
.alert {
  --alert-color: var(--info);
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--alert-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--alert-color) 45%, transparent);
  color: var(--text);
}
.alert > svg { flex-shrink: 0; width: 1.375rem; height: 1.375rem; color: var(--alert-color); margin-top: 1px; }
.alert__title { font-weight: 600; font-size: 0.9375rem; }
.alert__text  { font-size: var(--text-sm); color: var(--text-muted); }
.alert--success { --alert-color: var(--success); }
.alert--warning { --alert-color: var(--warning); }
.alert--danger  { --alert-color: var(--danger); }

/* Navegação ---------------------------------------------------------------- */
.nav-link {
  display: inline-flex; align-items: center;
  min-height: 3rem; padding: 0 var(--space-4);
  color: var(--text-muted);
  font-size: 0.9375rem; font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--duration-fast) var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--text); border-bottom-color: var(--gtv-yellow-400); }
[data-theme="light"] .nav-link[aria-current="page"] { border-bottom-color: var(--gtv-blue-600); }

.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--border); }
.tab {
  min-height: 3rem; padding: 0 var(--space-4);
  background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  color: var(--text-muted); font: 600 0.9375rem/1 var(--font-body); cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--gtv-blue-500); }

/* Utilitários mínimos ------------------------------------------------------ */
.stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-5);
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}