/* UI-кит Лоции: единый файл токенов.
   Светлая и тёмная темы определены через [data-theme="…"] на корне.
   Брендовые константы из brand.md сохраняются в обеих темах;
   семантические цвета (info/success/warning) — расширение брендбука.
   Никаких хексов вне этого файла (исключения — исходные SVG-ассеты). */

:root {
  /* Брендовые константы */
  --brand: #7B37F2;
  --brand-hover: #B78FFD;
  --brand-soft: #C76BFC;
  --brand-on: #FAF7FE;
  --danger: #E0592E;
  --dark: #202020;

  /* Геометрия и движение */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 48px;
  --radius-field: 12px;
  --radius-button: 9999px;
  --radius-card: 24px;
  --radius-sm: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Шрифты */
  --font-sans: 'AeonikPro', system-ui, sans-serif;
  --font-display: 'PP Right Grotesk Compact Dark', 'AeonikPro', sans-serif;
}

@layer loodsen {
  :root,
  [data-theme='light'] {
    color-scheme: light;

    --ink: #120F18;
    --ink-muted: #999799;
    --text-muted: #66616D;
    --surface: #FFFFFF;
    --bg: #F3F1EE;
    --bg-2: #E8E6E3;
    --line: #DCDAD8;
    --line-strong: #BDBBBB;
    --control-line: #827C86;

    --action: var(--brand);
    --action-on: var(--brand-on);
    --action-hover: var(--brand-hover);
    --action-hover-on: #120F18;
    --focus: var(--brand);

    --info: #6024C6;
    --info-soft: #F1EAFE;
    --success: #2E7650;
    --success-soft: #E4F0E8;
    --warning: #8A5A00;
    --warning-soft: #F8EDD6;
    --danger-ink: #B23F1A;
    --danger-soft: #FBE7DF;
  }

  [data-theme='dark'] {
    color-scheme: dark;

    --ink: #F4F1F7;
    --ink-muted: #A39BAA;
    --text-muted: #C0B8C8;
    --surface: #242128;
    --bg: #18161C;
    --bg-2: #322E38;
    --line: #49434F;
    --line-strong: #625A6A;
    --control-line: #82788D;

    --action: var(--brand-hover);
    --action-on: #120F18;
    --action-hover: var(--brand-soft);
    --action-hover-on: #120F18;
    --focus: var(--brand-hover);

    --info: #CEB3FF;
    --info-soft: #352746;
    --success: #86D3A2;
    --success-soft: #1D3729;
    --warning: #F0C477;
    --warning-soft: #3C2F18;
    --danger-ink: #FFB29B;
    --danger-soft: #43271F;
  }
}


/* Локальные шрифты. AeonikPro — основной текст и интерфейс;
   PP Right Grotesk Compact Dark — акцентный ресурс витрины.
   Коммерческие, лицензия на них у Лоции: только локально/stand.yakutov.com. */

@font-face {
  font-family: 'AeonikPro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/aeonikpro-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'AeonikPro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/aeonikpro-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'AeonikPro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/aeonikpro-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'AeonikPro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/aeonikpro-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'PP Right Grotesk Compact Dark';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/PPRightGrotesk-CompactDark.otf') format('opentype');
}


/* Базовый слой кита. Все видимые правила контролов собраны здесь.
   Цвета — только из tokens.css, геометрия — токены. Стили применяются
   через @layer loodsen, чтобы приложение могло переопределить без
   залезания в глобальную каскадность. */

/* Базовая типографика приложения */
@layer loodsen {
  .ld-app {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.45;
  }
  .ld-app h1, .ld-app h2, .ld-app h3 { margin: 0; font-weight: 600; color: var(--ink); }
  .ld-app h1 { font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
  .ld-app h2 { font-size: 20px; font-weight: 500; }
  .ld-app h3 { font-size: 16px; font-weight: 600; }
  .ld-app .ld-num { font-weight: 500; font-variant-numeric: tabular-nums; }
  .ld-text-muted { color: var(--text-muted); }
  @media (max-width: 720px) {
    .ld-app h1 { font-size: 22px; }
  }
}

/* ----- LdButton ----- */
@layer loodsen {
  .ld-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-weight: 500;
    border: 0;
    border-radius: var(--radius-button);
    background: var(--bg-2);
    color: var(--ink);
    cursor: pointer;
    min-height: var(--control-h);
    height: var(--control-h);
    padding: 0 20px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
  }
  .ld-button:hover:not(:disabled):not([aria-busy='true']) {
    background: var(--line);
  }
  .ld-button:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }
  .ld-button:disabled {
    color: var(--line-strong);
    cursor: not-allowed;
    background: var(--bg-2);
  }
  .ld-button[aria-busy='true'] {
    cursor: progress;
    opacity: 0.7;
  }

  .ld-button--primary {
    background: var(--action);
    color: var(--action-on);
  }
  .ld-button--primary:hover:not(:disabled):not([aria-busy='true']) {
    background: var(--action-hover);
    color: var(--action-hover-on);
  }
  .ld-button--primary:disabled {
    background: var(--bg-2);
    color: var(--line-strong);
  }

  .ld-button--ghost {
    background: transparent;
    color: var(--ink);
    padding: 0 8px;
    min-height: var(--control-h-sm);
    height: var(--control-h-sm);
    font-weight: 500;
  }
  .ld-button--ghost:hover:not(:disabled) { background: var(--bg-2); }

  .ld-button--danger {
    background: transparent;
    color: var(--danger-ink);
    padding: 0 8px;
    min-height: 0;
    font-weight: 400;
    text-decoration: none;
  }
  .ld-button--danger:hover:not(:disabled) { text-decoration: underline; }
  .ld-button--danger:disabled { color: var(--line-strong); text-decoration: none; cursor: not-allowed; }

  .ld-button--tab {
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius-button);
  }
  .ld-button--tab:hover:not(:disabled):not([aria-pressed='true']):not([aria-current='page']) {
    background: var(--bg-2);
  }
  .ld-button--tab[aria-pressed='true'],
  .ld-button--tab[aria-current='page'] {
    background: var(--action);
    color: var(--action-on);
  }

  .ld-button--bare {
    background: transparent;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    color: inherit;
    font-weight: inherit;
  }
  .ld-button--bare:hover:not(:disabled) { background: transparent; opacity: 0.8; }

  .ld-button--sm { min-height: var(--control-h-sm); height: var(--control-h-sm); font-size: 13px; padding: 0 14px; }
  .ld-button--lg { min-height: var(--control-h-lg); height: var(--control-h-lg); font-size: 16px; padding: 0 24px; }
}

/* ----- LdInput / LdSelect / LdTextarea ----- */
@layer loodsen {
  .ld-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-weight: 500;
    margin: 0;
  }
  .ld-field > label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
  }
  .ld-field-error {
    font-size: 12px;
    color: var(--danger-ink);
    font-weight: 600;
  }
  .ld-input, .ld-select, .ld-textarea {
    font: inherit;
    font-weight: 400;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    padding: 0 14px;
    min-height: var(--control-h);
    height: var(--control-h);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: border-color 120ms ease, background 120ms ease;
  }
  .ld-input::placeholder, .ld-textarea::placeholder { color: var(--text-muted); }
  .ld-input:focus-visible,
  .ld-select:focus-visible,
  .ld-textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-color: var(--control-line);
  }
  .ld-input[aria-invalid='true'],
  .ld-select[aria-invalid='true'],
  .ld-textarea[aria-invalid='true'] {
    border-color: var(--danger-ink);
  }
  .ld-input:disabled, .ld-select:disabled, .ld-textarea:disabled {
    background: var(--bg-2);
    color: var(--text-muted);
    cursor: not-allowed;
  }
  .ld-textarea {
    height: auto;
    min-height: 96px;
    padding: 10px 14px;
    resize: vertical;
    line-height: 1.45;
  }
  /* Кастомный шеврон для select: 14 px справа, цвет через currentColor */
  .ld-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 4.75L7 9.25l4.5-4.5' fill='none' stroke='%23827C86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    text-overflow: ellipsis;
  }
  [data-theme='dark'] .ld-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 4.75L7 9.25l4.5-4.5' fill='none' stroke='%2382788D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* ----- LdCheckbox ----- */
@layer loodsen {
  .ld-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--control-h);
    cursor: pointer;
    font-weight: 400;
    color: var(--ink);
  }
  .ld-checkbox__box {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--surface);
    transition: background 120ms ease, border-color 120ms ease;
    flex-shrink: 0;
  }
  .ld-checkbox__box[data-checked='true'] {
    background: var(--action);
    border-color: var(--action);
  }
  .ld-checkbox__box[data-checked='true']::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--action-on);
    border-bottom: 2px solid var(--action-on);
    transform: rotate(-45deg) translate(1px, -1px);
  }
  .ld-checkbox:focus-within .ld-checkbox__box {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }
  .ld-checkbox[data-disabled='true'] { color: var(--text-muted); cursor: not-allowed; }
  .ld-checkbox[data-disabled='true'] .ld-checkbox__box { background: var(--bg-2); border-color: var(--line); }
  .ld-checkbox__native {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    border: 0; clip: rect(0 0 0 0);
    overflow: hidden;
  }
  .ld-checkbox--sr-label {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
  }
}

/* ----- LdTable ----- */
@layer loodsen {
  .ld-table-wrap {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--surface);
    font-variant-numeric: tabular-nums;
  }
  .ld-table-wrap[aria-busy='true'] { opacity: 0.6; }
  .ld-table-wrap:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }
  .ld-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .ld-table[role='table'] { table-layout: auto; }
  .ld-table th, .ld-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-weight: 400;
    white-space: nowrap;
    color: var(--ink);
  }
  .ld-table th {
    font-weight: 600;
    background: var(--bg);
    font-size: 13px;
    color: var(--text-muted);
  }
  .ld-table tbody tr:last-child td { border-bottom: 0; }
  .ld-table td[data-numeric='true'],
  .ld-table th[data-numeric='true'] {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .ld-table__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
  }
  .ld-table-wrap[data-caption='hidden'] .ld-table__caption { position: absolute; clip: rect(0 0 0 0); }
  .ld-table-wrap[data-caption='none'] .ld-table__caption { display: none; }
}

/* ----- LdBadge ----- */
@layer loodsen {
  .ld-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-button);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    background: var(--bg-2);
    color: var(--ink);
    line-height: 1;
  }
  .ld-badge--md {
    min-height: var(--control-h);
    height: var(--control-h);
    font-size: 14px;
    padding: 0 16px;
  }
  .ld-badge--neutral { background: var(--bg-2); color: var(--ink); }
  .ld-badge--info { background: var(--info-soft); color: var(--info); }
  .ld-badge--success { background: var(--success-soft); color: var(--success); }
  .ld-badge--warning { background: var(--warning-soft); color: var(--warning); }
  .ld-badge--danger { background: var(--danger-soft); color: var(--danger-ink); }
  a.ld-badge { text-decoration: underline; text-underline-offset: 3px; }
}

/* ----- LdLink ----- */
@layer loodsen {
  .ld-link {
    color: var(--action);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
  }
  .ld-link:hover { color: var(--action-hover); }
  .ld-link:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }
  .ld-link[aria-current='page'] { color: var(--action); text-decoration: none; }
  .ld-link--action {
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
  }
  .ld-link--action:hover { color: var(--action); }
  .ld-link--action[aria-current='page'] { color: var(--action); }
}

/* ----- LdCard ----- */
@layer loodsen {
  .ld-card {
    background: var(--surface);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    color: var(--ink);
    box-sizing: border-box;
  }
  .ld-card--sm { padding: var(--space-4); }
  .ld-card--ghost { background: transparent; border: 1px solid var(--line); }
}

/* ----- LdAlert ----- */
@layer loodsen {
  .ld-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-field);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
  }
  .ld-alert__icon {
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%;
    display: inline-grid; place-items: center;
    font-weight: 700; font-size: 12px;
  }
  .ld-alert--info { background: var(--info-soft); color: var(--info); }
  .ld-alert--info .ld-alert__icon { background: var(--info); color: var(--surface); }
  .ld-alert--success { background: var(--success-soft); color: var(--success); }
  .ld-alert--success .ld-alert__icon { background: var(--success); color: var(--surface); }
  .ld-alert--warning { background: var(--warning-soft); color: var(--warning); }
  .ld-alert--warning .ld-alert__icon { background: var(--warning); color: var(--surface); }
  .ld-alert--danger { background: var(--danger-soft); color: var(--danger-ink); }
  .ld-alert--danger .ld-alert__icon { background: var(--danger-ink); color: var(--surface); }
}

/* ----- LdState ----- */
@layer loodsen {
  .ld-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 16px;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface);
    border-radius: var(--radius-card);
  }
  .ld-state[aria-busy='true']::before {
    content: '';
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 3px solid var(--line);
    border-top-color: var(--action);
    animation: ld-spin 700ms linear infinite;
  }
  .ld-state__title { font-size: 18px; font-weight: 600; color: var(--ink); }
  .ld-state__desc { font-size: 14px; max-width: 360px; line-height: 1.45; }
  .ld-state__actions { margin-top: 8px; }
  @keyframes ld-spin { to { transform: rotate(360deg); } }
}

/* ----- LdDialog ----- */
@layer loodsen {
  .ld-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ink);
    max-width: min(560px, calc(100vw - 32px));
    width: 100%;
    border-radius: var(--radius-card);
  }
  .ld-dialog::backdrop {
    background: rgba(18, 15, 24, 0.5);
    backdrop-filter: blur(2px);
  }
  [data-theme='dark'] .ld-dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
  .ld-dialog__panel {
    background: var(--surface);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
  }
  .ld-dialog__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--ink);
  }
  .ld-dialog__close {
    position: absolute;
    top: 12px; right: 12px;
    background: transparent;
    border: 0;
    border-radius: 9999px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--text-muted);
  }
  .ld-dialog__close:hover { background: var(--bg-2); color: var(--ink); }
  .ld-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ld-dialog__scroller {
    overflow-y: auto;
  }
  @media (max-width: 720px) {
    .ld-dialog { max-width: calc(100vw - 16px); }
    .ld-dialog__panel { max-height: calc(100vh - 16px); padding: var(--space-4); }
  }
}