/*
 * Transporter — base layer
 *
 * Tokens below are sampled from production computed styles (Tier 0 spec),
 * not chosen. Changing one changes the site; they are parity targets.
 */

:root {
    /* ── Brand ── */
    --tr-brand:        #BF3434;  /* menu button, active nav */
    --tr-brand-sale:   #C62D3C;  /* sale badges — see D-04, two reds in use */

    /* ── Surfaces ── */
    --tr-black:        #000000;  /* header row 1, mobile toolbar */
    --tr-dark:         #222222;  /* header row 2 */
    --tr-card:         #1A1A1A;  /* mega menu category card */
    --tr-white:        #FFFFFF;
    --tr-btn-open:     #E0E0E0;  /* menu button, open state */

    /* ── Text ── */
    --tr-text:         #767676;  /* body */
    --tr-text-strong:  #111111;
    --tr-text-invert:  #FFFFFF;
    --tr-text-muted:   rgba(255, 255, 255, 0.8);

    /* ── Scrim ── */
    --tr-overlay:      rgba(0, 0, 0, 0.55);

    /* ── Type ──
       Bebas covers Latin display; FiraGO and MarkGeo carry Georgian.
       The pairing is required — a single family breaks one or the other. */
    --tr-font-body:    "Open Sans", Arial, Helvetica, sans-serif;
    --tr-font-display: Bebas, FiraGO, sans-serif;
    --tr-font-ka:      FiraGO, sans-serif;
    --tr-font-ka-head: MarkGeo, sans-serif;

    --tr-size-body:    15px;
    --tr-line-body:    24px;

    /* ── Layout ── */
    --tr-container:    1170px;
    --tr-gutter:       26px;      /* measured header left offset */
    --tr-header-1:     80px;
    --tr-header-2:     60px;
    --tr-toolbar:      55px;      /* mobile bottom bar */

    /* ── Z-index scale ──
       Values match the existing stack so ported components keep their
       relationships. The mega menu genuinely sits at 9998/9999/10001. */
    --tr-z-toolbar:    350;
    --tr-z-overlay:    9998;
    --tr-z-panel:      9999;
    --tr-z-trigger:    10001;
}

/* ── Reset ── */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--tr-white);
    color: var(--tr-text);
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-line-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--tr-brand); }

button { cursor: pointer; background: none; border: 0; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

/* ── Accessibility ── */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--tr-brand);
    outline-offset: 2px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: 8px; left: 8px;
    z-index: 100000;
    padding: 10px 18px;
    background: var(--tr-black);
    color: var(--tr-white);
}

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

/* ── Layout primitives ── */

.tr-container {
    width: 100%;
    max-width: var(--tr-container);
    margin-inline: auto;
    padding-inline: var(--tr-gutter);
}

.tr-main { min-height: 40vh; }

/* Wide content must scroll inside its own box, never the page. */
.tr-scroll-x { overflow-x: auto; }