@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../views';

/*
 | teeu design tokens — редизайн 2026 (tmp/design/redesign-2026, «UI Kit»).
 | Плотный торговый стиль: хайрлайны вместо мягких теней, цена — главный элемент.
 | Single source of truth for palette, type, radius, elevation.
 | See docs/design-inventory.md.
 */
@theme {
    /* Typography */
    --font-sans: 'Golos Text', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

    /* Brand */
    --color-primary: #1e4fd8;
    --color-primary-dark: #1740b0;
    --color-primary-soft: #edf2fe;
    --color-primary-soft-hover: #dce6fd;

    /* Ink / text: заголовки и цены → основной текст → вторичный → подписи */
    --color-ink: #16181d;
    --color-slate: #3a3f4a;
    --color-secondary: #5a5f6a;
    --color-muted: #8a8f98;
    --color-disabled: #9aa0ab;

    /* Surfaces */
    --color-line: #e7e9ee;
    --color-line-strong: #c6ccda;
    --color-divider: #f0f1f5;
    --color-canvas: #f6f7f9;
    --color-hover: #f2f4f8;
    --color-dark: #14151a;

    /* Semantic: цвет текста / подложка */
    --color-success: #1d7a44;
    --color-success-soft: #e5f5eb;
    --color-warning: #b4682b;
    --color-warning-soft: #fff1e3;
    --color-sale: #e5322d;
    --color-sale-soft: #fdecec;
    --color-rating: #f5a623;

    /* Radius: 6 — бейджи · 8 — кнопки, поля, карточки · 12 — панели и баннеры */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 12px;

    /* Elevation. По умолчанию — только хайрлайн: «карточная» тень рисуется
       кольцом в 1px цвета бордера, так старые `shadow-[var(--shadow-card)]`
       без переделки становятся рамкой. Настоящая тень — у наведения, липких
       панелей, выпадашек и модалок. */
    --shadow-card: 0 0 0 1px var(--color-line);
    --shadow-hover: 0 6px 18px rgb(20 30 60 / 0.09);
    --shadow-sticky: 0 4px 16px rgb(20 30 60 / 0.05);
    --shadow-frame: 0 20px 44px rgb(20 30 60 / 0.14);
    --shadow-modal: 0 30px 80px rgb(20 30 60 / 0.3);
    --shadow-primary: 0 0 #0000;
    --shadow-float: 0 4px 16px rgb(20 30 60 / 0.05);
}

@layer base {
    body {
        background-color: #fff;
        color: var(--color-ink);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
    }

    [x-cloak] {
        display: none !important;
    }

    /* Tailwind v4 resets <button> cursor to default — restore the pointer. */
    button:not(:disabled),
    [role='button']:not(:disabled),
    summary {
        cursor: pointer;
    }
}

/*
 * Вьюпорт ленты логотипов на /sell (Alpine-компонент logoMarquee).
 * Прокрутка нативная: палец на телефоне и трекпад работают сами, с инерцией,
 * а JS лишь подталкивает scrollLeft и зацикливает ленту. Полосу прокрутки
 * прячем — листание идёт свайпом и стрелками.
 *
 * Намеренно вне @layer: утилиты Tailwind лежат в слое utilities, который идёт
 * ПОСЛЕ components, и при равной специфичности перебивали бы эти правила.
 */
.marquee {
    overflow-x: auto;
    overflow-y: hidden;
    /* Горизонтальный свайп не должен утягивать за собой страницу или
       вызывать «назад» жестом от края. */
    overscroll-behavior-x: contain;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* старый Edge */
}

.marquee::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari */
}

/*
 * Атрибуция OSM на карте. Специально вне @layer: leaflet.css приезжает из
 * JS-бандла без слоя, а неслоёные стили всегда бьют слоёные — правило внутри
 * @layer сюда бы не долетело. Победа идёт по специфичности: у Leaflet это
 * `.leaflet-control` (0,1,0), здесь два класса (0,2,0).
 */
.leaflet-control-attribution.leaflet-control {
    position: absolute;
}

/*
 * Панели и контролы Leaflet живут на z-index 400–1000, а сам контейнер карты
 * своего контекста наложения не создаёт — поэтому карта пролезала поверх липкой
 * шапки (z-40) и нижнего бара на мобиле. `z-index: 0` на позиционированном
 * контейнере запирает всю эту кухню внутри карты. Тоже вне @layer: leaflet.css
 * приезжает из JS-бандла неслоёным, а неслоёные стили бьют слоёные.
 */
.leaflet-container {
    position: relative;
    z-index: 0;
}

/*
 * Карточки товаров в тексте статьи (блок «Товары из каталога»). Типографика
 * статьи в <x-prose> задана утилитами вида [&_a]:text-[var(--color-primary)],
 * и они достают до любой ссылки внутри: карточка целиком ссылка, её название
 * стало бы синим и жирным, а при наведении подчёркивалось. Вне @layer
 * намеренно — неслоёные стили бьют утилиты без !important. Самой ссылке
 * карточки цвет и начертание её собственные классы не задают, спорить не с чем.
 */
.article-products a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.article-products img {
    border-radius: 0;
}