:root {
  --color-primary: #0f172a;
  --color-secondary: #38bdf8;
  --color-accent: #f97316;
  --color-bg: #020617;
  --color-surface: #020617;
  --color-text: #e5e7eb;
  --radius-base: retro-80;
  --layout-container-width: 1200px;
  --layout-gutter-x: 1.5rem;
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Базовый контейнер, чтобы все страницы были визуально согласованы */
.site-container {
  max-width: var(--layout-container-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter-x);
}

/* Общие utility-классы, которые ИИ может использовать в Tailwind-окружении */
.site-card {
  border-radius: var(--radius-base);
  background-color: var(--color-surface);
}

/* Кнопки на всякий случай (если модель захочет использовать эти классы) */
.btn-primary-soft {
  border-radius: var(--radius-base);
  background: var(--color-primary);
  color: white;
}

.btn-primary-soft:hover {
  filter: brightness(1.05);
}

/* Минимальная адаптация шапки/футера, если модель захочет использовать */
.site-header,
.site-footer {
  backdrop-filter: blur(12px);
}

/* ------------------------------------------------------------
   Canal & Controller — custom color utilities
   (Fallback for non-built Tailwind color names used on Comunidade)
------------------------------------------------------------ */
:root{
  --cc-vermilion: #f75a24;
  --cc-vermilion-dark: #e24d1d;
  --cc-cream: #FFF8F0;
  --cc-espresso-900: #2C2117;
  --cc-espresso-700: #584d3b;
}

/* Solid colors */
.bg-vermilion{ background: var(--cc-vermilion); }
.bg-cream{ background: var(--cc-cream); }
.bg-espresso-900{ background: var(--cc-espresso-900); }

.text-vermilion{ color: var(--cc-vermilion); }
.text-espresso-900{ color: var(--cc-espresso-900); }
.text-espresso-700{ color: var(--cc-espresso-700); }

.border-vermilion{ border-color: var(--cc-vermilion); }

/* Opacity variants (Tailwind-like) */
.bg-vermilion\/20{ background: rgba(247, 90, 36, .20); }
.hover\:bg-vermilion\/5:hover{ background: rgba(247, 90, 36, .05); }

/* Hover + focus helpers */
.hover\:bg-cream:hover{ background: var(--cc-cream); }
.hover\:bg-vermilion-dark:hover{ background: var(--cc-vermilion-dark); }

.focus-visible\:ring-vermilion:focus-visible{ --tw-ring-color: rgba(247, 90, 36, 1); }
.focus-within\:ring-vermilion\/40:focus-within{ --tw-ring-color: rgba(247, 90, 36, .40); }

/* Gradients */
.from-cream{
  --tw-gradient-from: var(--cc-cream);
  --tw-gradient-to: rgb(255 248 240 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}