/* Xamar — дизайн-система (канон бренда + motion) */

:root {
  /* ——— Brand / color ——— */
  --home-primary: #2d3e50;
  --home-primary-deep: #1f2d3d;
  --home-primary-hover: #253545;
  --home-primary-light: #e8eef4;
  --home-primary-soft: #d4dde6;
  --home-primary-shadow: rgba(45, 62, 80, 0.22);
  --home-primary-shadow-hover: rgba(45, 62, 80, 0.3);

  /* Accent — только soft/decorative (chips soft, tints). НЕ для CTA-кнопок */
  --home-accent: #5c7a64;
  --home-accent-deep: #4a6351;
  --home-accent-light: #e7efe9;
  --home-accent-shadow: rgba(92, 122, 100, 0.18);
  --home-accent-shadow-hover: rgba(92, 122, 100, 0.28);

  --home-bg: #f4f6f8;
  --home-surface: #ffffff;
  --home-surface-tint: #eceff2;
  --home-text: #212529;
  --home-text-secondary: #5f6b75;
  --home-text-muted: #8a949b;
  --home-border: #e2e6ea;
  --home-border-strong: #cfd6dd;

  --home-success: #2f7a3e;
  --home-error: #b94a4a;
  --home-warning: #9a7428;
  --home-danger: #b94a4a;
  --home-danger-deep: #9a3a3a;
  --home-danger-light: #f8eaea;

  /* ——— Type scale ——— */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.8125rem;    /* 13 */
  --text-md: 0.875rem;     /* 14 */
  --text-base: 0.9375rem;  /* 15 */
  --text-lg: 1.0625rem;    /* 17 */
  --text-xl: 1.25rem;      /* 20 */
  --text-2xl: 1.5rem;      /* 24 */
  --text-3xl: 1.875rem;    /* 30 */

  --leading-tight: 1.25;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --tracking-tight: -0.02em;

  /* ——— Space scale ——— */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ——— Radius ——— */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.125rem;
  --radius-pill: 9999px;
  --home-radius: 16px;
  --home-radius-sm: 12px;

  /* ——— Shadow ——— */
  --home-shadow-xs: 0 1px 1px rgba(33, 37, 41, 0.04);
  --home-shadow-sm: 0 1px 2px 0 rgba(33, 37, 41, 0.04);
  --home-shadow: 0 4px 20px -2px rgba(33, 37, 41, 0.06);
  --home-shadow-md: 0 6px 16px -4px rgba(33, 37, 41, 0.08);
  --home-shadow-lg: 0 20px 40px -8px rgba(33, 37, 41, 0.08);
  --shadow-btn:
    0 1px 2px rgba(33, 37, 41, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --shadow-btn-hover:
    0 2px 6px rgba(33, 37, 41, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --shadow-btn-active: 0 1px 1px rgba(33, 37, 41, 0.12);

  /* ——— Focus / tap ——— */
  --home-focus-ring: 0 0 0 3px rgba(45, 62, 80, 0.16);
  --home-focus-ring-danger: 0 0 0 3px rgba(185, 74, 74, 0.2);
  --home-tap-min: 2.75rem;

  /* ——— Motion ——— */
  --motion-instant: 100ms;
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 250ms;
  --motion-enter: 300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: ease;

  /* Sticky offset under fixed header */
  --site-sticky-offset: 7rem;

  /* ——— Semantic aliases ——— */
  --color-primary: var(--home-primary);
  --color-primary-deep: var(--home-primary-deep);
  --color-primary-light: var(--home-primary-light);
  --color-accent: var(--home-accent);
  --color-accent-deep: var(--home-accent-deep);
  --color-accent-light: var(--home-accent-light);
  --color-accent-mid: #6b8a72;
  --color-accent-shadow: var(--home-accent-shadow);
  --color-accent-shadow-hover: var(--home-accent-shadow-hover);
  --color-background: var(--home-bg);
  --color-surface: var(--home-surface);
  --color-surface-tint: var(--home-surface-tint);
  --color-border: var(--home-border);
  --color-text: var(--home-text);
  --color-text-secondary: var(--home-text-secondary);
  --color-text-muted: var(--home-text-muted);
  --color-success: var(--home-success);
  --color-error: var(--home-error);
  --color-warning: var(--home-warning);
  --color-danger: var(--home-danger);
}

@media (min-width: 769px) {
  :root {
    --site-sticky-offset: 7.75rem;
  }
}

/* ——— Base ——— */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--leading-normal);
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 1000;
  padding: 0.625rem 1rem;
  border-radius: var(--home-radius-sm);
  background: var(--home-primary);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--motion-fast) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--home-focus-ring);
}

#main-content:focus {
  outline: none;
}

#main-content:focus-visible {
  box-shadow: none;
}

body.site-body main.max-w-7xl,
body.site-body main.max-w-3xl {
  max-width: 80rem;
}

/* Cards — shared language */
body.site-body .card,
.card,
.ui-card {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow-sm);
  transition:
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

body.site-body .text-primary-700,
body.site-body .text-primary-800 {
  color: var(--color-primary);
}

body.site-body a.text-primary-700:hover {
  color: var(--color-primary-deep);
}

/* Tailwind gray → palette hierarchy */
body.site-body .text-gray-900,
body.site-body .text-gray-800 {
  color: var(--home-text);
}

body.site-body .text-gray-700,
body.site-body .text-gray-600 {
  color: var(--home-text-secondary);
}

body.site-body .text-gray-500,
body.site-body .text-gray-400 {
  color: var(--home-text-muted);
}

body.site-body .bg-gray-50,
body.site-body .bg-gray-100 {
  background-color: var(--home-bg);
}

body.site-body .bg-gray-200 {
  background-color: var(--home-border);
}

body.site-body .border-gray-100,
body.site-body .border-gray-200 {
  border-color: var(--home-border);
}

body.site-body .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body.site-body .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--home-border);
}

body.site-body .hover\:bg-gray-50:hover {
  background-color: var(--color-surface-tint);
}

body.site-body .hover\:bg-gray-100:hover {
  background-color: var(--home-border);
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--home-text);
  font-weight: var(--font-weight-semibold);
}

::placeholder {
  color: var(--home-text-muted);
  opacity: 1;
}

/* ——— Focus rings ——— */

:focus-visible {
  outline: none;
  box-shadow: var(--home-focus-ring);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[role='button']:focus-visible {
  outline: none;
  box-shadow: var(--home-focus-ring);
}

.site-logo {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  object-fit: contain;
  flex-shrink: 0;
}

/* ——— Links ——— */

a.link,
.site-link {
  color: var(--home-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition:
    color var(--motion-fast) var(--ease-out),
    text-decoration-color var(--motion-fast) var(--ease-out);
}

a.link:hover,
.site-link:hover {
  color: var(--home-primary-deep);
  text-decoration: underline;
}

a.link:active,
.site-link:active {
  color: var(--home-primary-deep);
}

/* Soft inputs site-wide */
input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='number'],
input[type='url'],
textarea,
select {
  border-radius: var(--radius-lg);
  transition:
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

/* ——— Flash toasts ——— */

.site-messages {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
  padding: 0;
}

.site-messages__item {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius-sm);
  background: var(--home-surface);
  box-shadow: var(--home-shadow);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--home-text);
  animation:
    site-messages-in var(--motion-slow) var(--ease-out),
    site-messages-out 0.4s var(--ease-out) 4.5s forwards;
}

@keyframes site-messages-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes site-messages-out {
  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

.site-messages__item--success,
.site-messages__item--info {
  border-left: 3px solid var(--color-success);
}

.site-messages__item--warning {
  border-left: 3px solid var(--color-warning);
}

.site-messages__item--error {
  border-left: 3px solid var(--color-error);
}

@media (max-width: 768px) {
  .site-messages {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ——— Empty states ——— */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.empty-state__icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  color: var(--home-text-muted);
}

.empty-state__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2);
  color: var(--home-text);
  letter-spacing: var(--tracking-tight);
}

.empty-state__text {
  color: var(--home-text-secondary);
  max-width: 24rem;
  margin: 0 auto var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* CTA row: 1 primary + secondary outline + optional tertiary ghost/link */
.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

.empty-state__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--home-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition:
    color var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}

.empty-state__link:hover {
  color: var(--home-primary-deep);
  background: var(--home-primary-light);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.text-secondary {
  color: var(--home-text-secondary);
}

.text-muted {
  color: var(--home-text-muted);
}

/* ——— Buttons ———
   Hierarchy:
   primary  = filled slate + white (CTA)
   secondary = outline / light surface (NOT olive fill)
   ghost    = text / tertiary
   danger   = destructive
*/

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-danger,
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    transform var(--motion-instant) var(--ease-press),
    opacity var(--motion-fast) var(--ease-out);
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
.btn-accent:focus-visible,
.btn--primary:focus-visible,
.btn--secondary:focus-visible,
.btn--ghost:focus-visible,
.btn--danger:focus-visible {
  outline: none;
  box-shadow: var(--home-focus-ring);
}

.btn:disabled,
.btn[aria-disabled='true'],
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-ghost:disabled,
.btn-danger:disabled,
.btn-accent:disabled,
.btn.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Primary CTA — always filled + white text (fallbacks if tokens are invalid) */
.btn--primary,
.btn-primary,
.btn-accent {
  background: var(--home-primary, #2d3e50);
  color: #fff;
  border-color: var(--home-primary-deep, #1f2d3d);
  box-shadow: var(--shadow-btn);
}

.btn--primary:hover,
.btn-primary:hover,
.btn-accent:hover {
  background: var(--home-primary-hover, #253545);
  color: #fff;
  border-color: var(--home-primary-deep, #1f2d3d);
  box-shadow: var(--shadow-btn-hover);
}

.btn--primary:active,
.btn-primary:active,
.btn-accent:active {
  background: var(--home-primary-deep, #1f2d3d);
  color: #fff;
  transform: translateY(1px);
  box-shadow: var(--shadow-btn-active);
}

/* Secondary = outline / light surface — never olive fill */
.btn--secondary,
.btn-secondary,
.btn-outline {
  background: var(--home-surface);
  border-color: var(--home-border-strong);
  color: var(--home-text);
  box-shadow: var(--home-shadow-xs);
}

.btn--secondary:hover,
.btn-secondary:hover,
.btn-outline:hover {
  background: var(--home-primary-light);
  border-color: var(--home-primary);
  color: var(--home-primary);
  box-shadow: var(--home-shadow-sm);
}

.btn--secondary:active,
.btn-secondary:active,
.btn-outline:active {
  background: var(--home-primary-soft);
  border-color: var(--home-primary-deep);
  color: var(--home-primary-deep);
  transform: translateY(1px);
  box-shadow: none;
}

/* Ghost / tertiary */
.btn--ghost,
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--home-primary);
  box-shadow: none;
  min-height: 2.5rem;
  padding: 0.5rem 0.875rem;
}

.btn--ghost:hover,
.btn-ghost:hover {
  background: var(--home-primary-light);
  color: var(--home-primary-deep);
}

.btn--ghost:active,
.btn-ghost:active {
  background: var(--home-primary-soft);
  color: var(--home-primary-deep);
  transform: translateY(1px);
}

/* Danger */
.btn--danger,
.btn-danger {
  background: var(--home-danger);
  color: #fff;
  border-color: var(--home-danger-deep);
  box-shadow: var(--shadow-btn);
}

.btn--danger:hover,
.btn-danger:hover {
  background: var(--home-danger-deep);
  color: #fff;
  box-shadow: var(--shadow-btn-hover);
}

.btn--danger:active,
.btn-danger:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-btn-active);
}

.btn--danger:focus-visible,
.btn-danger:focus-visible {
  box-shadow: var(--home-focus-ring-danger);
}

/* Button sizes */
.btn--sm,
.btn-sm {
  min-height: 2.25rem;
  padding: 0.4375rem 0.875rem;
  font-size: var(--text-md);
  border-radius: var(--radius-md);
}

.btn--lg,
.btn-lg {
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  font-size: var(--text-lg);
}

.btn--block,
.btn-block {
  width: 100%;
}

/* ——— Chips ——— */

.chip,
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--home-border);
  background: var(--home-surface);
  color: var(--home-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    transform var(--motion-instant) var(--ease-press);
}

.chip:hover,
.ui-chip:hover {
  background: var(--home-bg);
  border-color: var(--home-primary-soft);
  color: var(--home-text);
}

.chip:active,
.ui-chip:active {
  transform: scale(0.97);
}

.chip:focus-visible,
.ui-chip:focus-visible {
  outline: none;
  box-shadow: var(--home-focus-ring);
}

.chip--active,
.chip.is-active,
.ui-chip--active {
  background: var(--home-primary-light);
  border-color: var(--home-primary-soft);
  color: var(--home-primary);
  font-weight: var(--font-weight-semibold);
}

.chip--active:hover,
.chip.is-active:hover,
.ui-chip--active:hover {
  background: var(--home-primary-soft);
  color: var(--home-primary-deep);
}

.chip--soft {
  background: var(--home-bg);
  border-color: var(--home-border);
}

/* ——— Form controls (global baseline; forms.css extends) ——— */

.ui-input,
.form-control {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--home-border);
  border-radius: var(--radius-lg);
  background: var(--home-surface);
  color: var(--home-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition:
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

.ui-input:hover,
.form-control:hover {
  border-color: var(--home-primary-soft);
}

.ui-input:focus,
.ui-input:focus-visible,
.form-control:focus,
.form-control:focus-visible {
  outline: none;
  border-color: var(--home-primary);
  box-shadow: var(--home-focus-ring);
}

.ui-input:disabled,
.form-control:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--home-bg);
}

.ui-input[aria-invalid='true'],
.form-control[aria-invalid='true'] {
  border-color: var(--home-error);
}

.ui-input[aria-invalid='true']:focus,
.form-control[aria-invalid='true']:focus {
  box-shadow: var(--home-focus-ring-danger);
}

/* ——— Skeleton / fade ——— */

@keyframes ui-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes site-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page content enter — спокойный fade без шума */
#main-content {
  animation: site-page-in var(--motion-enter) var(--ease-out) both;
}

@keyframes ui-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.ui-fade-in {
  animation: ui-fade-in var(--motion-enter) var(--ease-out) both;
}

.skeleton,
.ui-skeleton {
  display: block;
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    var(--home-bg) 0%,
    var(--home-primary-light) 45%,
    var(--home-bg) 90%
  );
  background-size: 200% 100%;
  animation: ui-skeleton-shimmer 1.2s var(--ease-in-out) infinite;
  color: transparent;
  pointer-events: none;
  user-select: none;
}

/* ——— Pagination ——— */

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 2rem;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--home-tap-min);
  min-height: var(--home-tap-min);
  height: auto;
  padding: 0 0.5rem;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition:
    background var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.pagination a {
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.pagination a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination .current {
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
}

/* ——— Reduced motion ——— */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0ms;
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
    --motion-enter: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:active,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-outline:active,
  .btn-ghost:active,
  .btn-danger:active,
  .btn-accent:active,
  .chip:active,
  .ui-chip:active {
    transform: none;
  }

  .skeleton,
  .ui-skeleton {
    animation: none;
    background: var(--home-primary-light);
  }

  .ui-fade-in,
  #main-content,
  .site-messages__item {
    animation: none;
  }
}