/**
 * iNKPPL Design System — Base
 * Reset, body, base elements, scrollbar, selection, focus, skeleton, container.
 */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  overflow-x: clip;
  transition: background var(--transition-normal), color var(--transition-normal);
}

/* Base Elements */
a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

::selection {
  background-color: var(--color-brand-accent);
  color: var(--color-bg);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: var(--color-border-hover);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--color-brand-accent);
  outline-offset: 2px;
}

/* Select / Dropdown
   Rule: ALL <select> elements inherit dark-aware styling automatically.
   - appearance: none + custom SVG chevron
   - Dark bg from DS tokens (color-bg-elevated)
   - Gold accent focus ring (color-brand-accent)
   - Hover: border-color bump
   - Disabled: opacity 0.5

   Component overrides:
   - .afisha-filter-select  → afisha-v2/event-filters.css (min-width 140px)
   - .master-filter__select → filterTPL1.tpl inline (pill-shaped, 999px radius)
   - .form-select           → account-v2/forms.css (full-width, 46px height)
   - .sp-form__select       → studio-profile-v2/sidebar.css
   - .toolbar-sort          → tattoos-v2/listing.css (compact, xs font)
   - .lang-select           → homepage-v2/header.css (transparent bg, tiny)

   To customize: add component class that overrides specific properties.
   DO NOT remove appearance:none or the base arrow.
*/
select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--color-text);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
}

select:hover { border-color: var(--color-border-hover); }

select:focus {
  outline: none;
  border-color: var(--color-brand-accent);
  box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.15);
}

select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

select option {
  background-color: var(--color-bg-elevated);
  color: var(--color-text);
}


/* Container */
.container {
  width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
}

.container--wide {
  width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-card) 25%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-card) 75%
  );
  background-size: 200% 100%;
  animation: ds-skeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes ds-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

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