@use 'abstracts' as *;

// Base
@use 'base/fonts';
@use 'base/reset';

// Кнопки до шапки: базовый `.btn`, затем шапка с более длинными селекторами перекрывает при конфликтах (без !important).
@use 'components/buttons';

// Layout
@use 'layout/header';
@use 'layout/footer';

// Components
@use 'components/breadcrumbs';
@use 'components/doctor-card';
@use 'components/filters';
@use 'components/modals';

// Pages
@use 'pages/doctors';
@use 'pages/doctor-detail';

// Контент под шапкой — ниже по z-index, чем выпадающие блоки навигации
main {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

// Кастомные свойства (токены из SCSS)
:root {
  --blue:           #{$color-blue};
  --red:            #{$color-red};
  --dark-blue:      #{$color-dark-blue};
  --white:          #{$color-white};
  --text:           #{$color-text};
  --text-muted:     #{$color-text-secondary};
  --black:          #{$color-black};
  --bg-filter:      #{$color-bg-filter};
  --font:           #{$font-main};
  --font-heading:   #{$font-heading};
  --font-body:      #{$font-body};
  --font-size-sm:   #{$font-size-sm};
  --line-height-tight: #{$line-height-tight};
  --radius-card:    #{$radius-md};
  --gap:        #{$gap};
  --gap-mobile: #{$gap-mobile};
  --container:  #{$container-max};
  --doctor-card-bg: #{$color-doctor-card-bg};
  --doctor-hero-bg: #{$color-doctor-hero-bg};
  --doctor-cta:     #{$color-doctor-cta};
  --nav-border:     #{$color-nav-border};
}

.container {
  @include container;
}

.visually-hidden {
  @include visually-hidden;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 8px 16px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: $color-blue;
  color: $color-white;
  font-size: 14px;
  border-radius: 4px;
  text-decoration: none;
}

// Временная заглушка главной (до готового макета в Figma)
.home-placeholder {
  padding: 80px 0;
  text-align: center;

  &__title {
    font-size: 36px;
    margin-bottom: 16px;
  }

  &__lead {
    color: var(--text-muted);
    margin-bottom: 32px;
  }
}