/*
 * TelegramHub design foundation.
 *
 * Tokens and opt-in primitives for the incremental rebuild started in Phase 6A.
 * Legacy components keep their current styling until their scheduled subphase.
 */

:root {
  /* Colors */
  --color-background: #0D0710;
  --color-surface: #18101C;
  --color-surface-raised: #241428;
  --color-primary: #E6347B;
  --color-primary-hover: #C92568;
  --color-secondary: #7C4DFF;
  --color-text: #FFF7FB;
  --color-muted: #C9B9C5;
  --color-border: #3A283D;
  --color-success: #39B77A;
  --color-danger: #E65B64;

  /* Typography */
  --font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-body: 1rem;
  --font-size-h1: clamp(2rem, 4vw, 3.5rem);
  --font-size-h2: clamp(1.5rem, 2.5vw, 2.25rem);
  --font-size-h3: clamp(1.125rem, 2vw, 1.375rem);
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-h2: 750;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.05;
  --line-height-body: 1.6;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;

  /* Shape */
  --radius-control: 0.5rem;
  --radius-card: 0.75rem;
  --radius-block: 1rem;

  /* Layout */
  --container-main: 80rem;
  --container-editorial: 47.5rem;
  --container-gutter: clamp(1rem, 3vw, 2rem);

  /* Interaction */
  --focus-color: var(--color-primary);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-color) 55%, transparent);
  --transition-fast: 160ms ease;
}

/* Esquemas persistentes selecionados em Aparência > Personalizar. */
body.scheme-vermelho-preto {
  --color-primary: #FF3B3B;
  --color-primary-hover: #D5262F;
  --color-secondary: #FF8A6B;
}

body.scheme-roxo-dourado {
  --color-primary: #9B4DFF;
  --color-primary-hover: #7A32D6;
  --color-secondary: #D4AF37;
}

body.scheme-vermelho-rosa {
  --color-primary: #FF2D55;
  --color-primary-hover: #D91E46;
  --color-secondary: #FF5CB8;
}

body.scheme-azul-vermelho {
  --color-primary: #2D8BFF;
  --color-primary-hover: #176ED1;
  --color-secondary: #FF3D6B;
}

/* Opt-in box model for reconstructed components. */
.th-foundation,
.th-foundation *,
.th-foundation *::before,
.th-foundation *::after {
  box-sizing: border-box;
}

.th-foundation {
  color: var(--color-text);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.th-foundation img {
  display: block;
  height: auto;
  max-width: 100%;
}

.th-foundation :where(button, input, select, textarea) {
  color: inherit;
  font: inherit;
}

.th-foundation :where(a, button, input, select, textarea):focus-visible,
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}

.th-container {
  margin-inline: auto;
  max-width: var(--container-main);
  padding-inline: var(--container-gutter);
  width: 100%;
}

.th-container--editorial {
  max-width: var(--container-editorial);
}

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