/* =========================================================================
   TravelKit SR — Global styles
   Base reset, typography, landmarks, section rhythm, focus.
   Depends on variables.css (must load first).
   ========================================================================= */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--tk-header-height) + 8px);
}

body.tk-body {
    margin: 0;
    font-family: var(--tk-font-body);
    font-size: var(--tk-fs-base);
    line-height: var(--tk-lh-normal);
    color: var(--tk-text);
    background-color: var(--tk-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--tk-space-4);
    font-family: var(--tk-font-heading);
    font-weight: var(--tk-fw-bold);
    line-height: var(--tk-lh-tight);
    letter-spacing: var(--tk-ls-tight);
    color: var(--tk-text-strong);
}

h1 { font-size: var(--tk-fs-5xl); font-weight: var(--tk-fw-extra); }
h2 { font-size: var(--tk-fs-4xl); }
h3 { font-size: var(--tk-fs-2xl); }
h4 { font-size: var(--tk-fs-xl); }

p { margin: 0 0 var(--tk-space-4); }

a {
    color: var(--tk-text-link);
    text-decoration: none;
    transition: color var(--tk-dur-fast) var(--tk-ease);
}
a:hover { color: var(--tk-text-link-hover); }
a:focus-visible {
    outline: 3px solid var(--tk-border-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

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

button { font-family: inherit; }

ul, ol { padding-inline-start: 1.25em; }
[role="list"] { list-style: none; padding: 0; margin: 0; }

.tk-skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: var(--tk-z-toast);
    padding: 10px 18px;
    background: var(--tk-primary-600);
    color: #fff;
    border-radius: var(--tk-radius-md);
    font-weight: var(--tk-fw-semibold);
    transition: top var(--tk-dur-fast) var(--tk-ease);
}
.tk-skip-link:focus { top: 12px; color: #fff; }

.container { max-width: var(--tk-container-max); }

.tk-main { padding-top: var(--tk-header-height); }

.tk-section {
    padding-block: var(--tk-section-y-md);
    background: var(--tk-bg);
}
.tk-section--soft   { background: var(--tk-bg-soft); }
.tk-section--subtle { background: var(--tk-bg-subtle); }
.tk-section--dark {
    background: linear-gradient(135deg, var(--tk-primary-700) 0%, var(--tk-primary-600) 60%, var(--tk-primary-500) 100%);
    color: var(--tk-text-inverse);
}
.tk-section--dark h2,
.tk-section--dark h3 { color: var(--tk-text-inverse); }

.tk-section__header { max-width: 780px; margin: 0 auto var(--tk-space-12); text-align: center; }
.tk-section__eyebrow {
    display: inline-block;
    margin-bottom: var(--tk-space-3);
    padding: 6px 14px;
    font-size: var(--tk-fs-xs);
    font-weight: var(--tk-fw-semibold);
    letter-spacing: var(--tk-ls-wide);
    text-transform: uppercase;
    color: var(--tk-primary-600);
    background: var(--tk-primary-50);
    border-radius: var(--tk-radius-pill);
}
.tk-section--dark .tk-section__eyebrow {
    background: rgba(255, 255, 255, 0.10);
    color: var(--tk-accent-300);
}
.tk-section__title { margin-bottom: var(--tk-space-4); }
.tk-section__subtitle {
    color: var(--tk-text-muted);
    font-size: var(--tk-fs-lg);
    line-height: var(--tk-lh-snug);
    margin: 0;
}
.tk-section__header--inverse .tk-section__subtitle { color: rgba(255,255,255,.75); }

:focus-visible { outline: 3px solid var(--tk-border-focus); outline-offset: 2px; }

::selection { background: var(--tk-primary-100); color: var(--tk-primary-800); }