/* === AutoTrans Miko design tokens + global helpers ===
   Shared by every component in this instance — see DESIGN_MANUAL.md at the instance root
   for the full spec these values come from. Registered as the first entry in every
   component's $this->styles so the tokens are available even when a page renders that
   component without navigation-autodopravamiko-1 (which used to be the only place these
   were declared). */
:root {
    --brand-yellow: #ffc619;
    --brand-amber: #fda300;
    --brand-yellow-tint: #fff3d6;

    --brand-sand: #e09f5a;
    --brand-sand-tint: #fbeee0;

    --navy-ink: #182833;
    --navy-surface: #153040;
    --navy-steel: #1f4762;
    --navy-steel-tint: #e8edf2;

    --bg-light: #ffffff;
    --bg-light-alt: #f5f7f8;
    --border: #d7dee3;
    --text-muted: #55707d;

    --success: #3f7d5c;
    --success-tint: #e4f0e9;
    --warning: #b9781d;
    --warning-tint: #f6e9d5;
    --danger: #c23b2e;
    --danger-tint: #fbe4e1;

    --font-heading: Oswald, "Arial Narrow", sans-serif;
    --font-body: Inter, Arial, Helvetica, sans-serif;

    --atm-container: 1200px;
    --atm-radius: 8px;
    --atm-transition: 0.2s ease;
    --atm-shadow: rgba(24, 40, 51, 0.12);
}

/* === Global helpers (scoped inside autodopravamiko components) === */
.atm-container {
    max-width: var(--atm-container);
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 640px) {
    .atm-container {
        padding: 0 48px;
    }
}

@media (min-width: 1024px) {
    .atm-container {
        padding: 0 64px;
    }
}

.atm-tagline {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-amber);
    margin-bottom: 10px;
}

.atm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: var(--atm-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        background var(--atm-transition),
        color var(--atm-transition),
        border-color var(--atm-transition);
}

.atm-btn--primary {
    background: var(--brand-yellow);
    color: var(--navy-ink);
    border-color: var(--brand-yellow);
}
.atm-btn--primary:hover {
    background: var(--brand-amber);
    border-color: var(--brand-amber);
}

.atm-btn--outline {
    background: transparent;
    color: var(--navy-ink);
    border-color: var(--navy-steel);
}
.atm-btn--outline:hover {
    background: var(--navy-steel-tint);
}

.atm-btn--ghost-light {
    background: transparent;
    color: var(--brand-yellow);
    border-color: var(--brand-yellow);
}
.atm-btn--ghost-light:hover {
    background: rgba(255, 198, 25, 0.12);
}