/* ==========================================================================
 * Drillrock – Global Design Tokens
 * База для всех остальных css/components/*.css
 * ========================================================================== */

:root {
  /* Базовый размер шрифта */
  --font-size: 16px;

  /* Шрифты */
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Веса шрифта */
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  /* Типовые размеры текста */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Базовые фоны (из Figma) */
  --color-page-bg: #ffffff;        /* background */
  --color-surface: #ffffff;        /* card */
  --color-surface-alt: #f3f3f5;    /* input-background */

  /* Текст */
  --color-text-main: oklch(0.145 0 0); /* foreground */
  --color-text-muted: #717182;         /* muted-foreground */

  /* Акценты */
  --color-primary: #030213;              /* primary */
  --color-primary-foreground: #ffffff;   /* primary-foreground */
  --color-secondary: oklch(0.95 0.0058 264.53); /* secondary */
  --color-secondary-foreground: #030213;        /* secondary-foreground */

  /* Доп. фоновые/акцентные */
  --color-muted: #ececf0;              /* muted */
  --color-accent: #e9ebef;             /* accent */
  --color-accent-foreground: #030213;  /* accent-foreground */

  /* Ошибки */
  --color-danger: #d4183d;             /* destructive */
  --color-danger-foreground: #ffffff;  /* destructive-foreground */

  /* Границы и input */
  --color-border: rgba(0, 0, 0, 0.1);      /* border */
  --color-input-border: rgba(0, 0, 0, 0.1);
  --color-input-bg: #f3f3f5;               /* input-background */
  --color-switch-bg: #cbced4;              /* switch-background */

  /* Обводка / фокус */
  --color-focus-ring: oklch(0.708 0 0);    /* ring */

  /* Цвета для диаграмм */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6   0.118 184.704);
  --chart-3: oklch(0.398 0.07  227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  /* Сайдбар (про запас) */
  --color-sidebar-bg: oklch(0.985 0 0);
  --color-sidebar-text: oklch(0.145 0 0);
  --color-sidebar-primary: #030213;
  --color-sidebar-primary-foreground: oklch(0.985 0 0);
  --color-sidebar-accent: oklch(0.97 0 0);
  --color-sidebar-accent-foreground: oklch(0.205 0 0);
  --color-sidebar-border: oklch(0.922 0 0);
  --color-sidebar-ring: oklch(0.708 0 0);

  /* Радиусы */
  --radius-base: 0.625rem;
  --radius-sm: calc(var(--radius-base) - 4px);
  --radius-md: calc(var(--radius-base) - 2px);
  --radius-lg: var(--radius-base);
  --radius-xl: calc(var(--radius-base) + 4px);

  /* Лэйаут */
  --layout-max-width: 1366px;
  --layout-gutter: 24px;

  /* Отступы-шкала */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

/* Опциональная тёмная тема (включится, если на html/body повесить .dark) */
.dark {
  --color-page-bg: oklch(0.145 0 0);
  --color-surface: oklch(0.145 0 0);
  --color-surface-alt: oklch(0.205 0 0);
  --color-text-main: oklch(0.985 0 0);
  --color-text-muted: oklch(0.708 0 0);

  --color-primary: oklch(0.985 0 0);
  --color-primary-foreground: oklch(0.205 0 0);

  --color-secondary: oklch(0.269 0 0);
  --color-secondary-foreground: oklch(0.985 0 0);

  --color-muted: oklch(0.269 0 0);
  --color-accent: oklch(0.269 0 0);
  --color-accent-foreground: oklch(0.985 0 0);

  --color-danger: oklch(0.396 0.141 25.723);
  --color-danger-foreground: oklch(0.637 0.237 25.331);

  --color-border: oklch(0.269 0 0);
  --color-input-border: oklch(0.269 0 0);
  --color-focus-ring: oklch(0.439 0 0);
}

/* ==========================================================================
 * Базовые стили документа
 * ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size);
  scroll-behavior: smooth; /* плавная прокрутка по якорям */
 /* overflow-x: hidden; /* защита от горизонтального скролла */
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  background-color: var(--color-page-bg);
  color: var(--color-text-main);
 /* overflow-x: hidden; /* защита от горизонтального скролла */
}

/* Универсальный контейнер (по желанию) */
.container {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

/* Типографика по умолчанию */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-main);
}

h1 {
  font-size: var(--text-2xl);
  line-height: 1.3;
}

h2 {
  font-size: var(--text-xl);
  line-height: 1.35;
}

h3 {
  font-size: var(--text-lg);
  line-height: 1.4;
}

p {
  margin: 0 0 1em;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* Ссылки по умолчанию */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Базовые секции */
section {
  padding-block: 0.5rem;
}

/* ==========================================================================
 * GLOBAL LAYOUT — фон на всю ширину, контент в контейнере
 * ========================================================================== */

/* Хедер, все секции и футер тянутся на 100% по ширине окна */
.site-header,
.site-footer,
section {
  width: 100%;
  display: block;
}

/* Главный контентный контейнер (если используешь в page.html.twig) */
.main-content-container {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

/* Внутренние контейнеры для хедера и футера */
.header-top__inner,
.header-bottom__inner,
.footer-top__inner,
.footer-bottom__inner,
.hero-inner,
.section-inner {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
  width: 100%;
}

/* На мобильных чуть меньше паддинги по краям,
 * чтобы всё не липло к границе экрана.
 */
@media (max-width: 640px) {
  .container,
  .main-content-container,
  .header-top__inner,
  .header-bottom__inner,
  .footer-top__inner,
  .footer-bottom__inner,
  .hero-inner,
  .section-inner {
    padding-inline: calc(var(--space-sm) * 1.1);
  }
}

/* ==========================================================================
 * End of global layout
 * ========================================================================== */