/* ─────────────────────────────────────────────────────────────
 * base.css — Phase 65
 *
 * Reset + tokens + typography + spacing + responsive utilities.
 * Mobile-first: defaults are tuned for 375px; ≥768px and ≥1024px
 * media queries scale up. No vendor framework — everything here is
 * pure CSS.
 *
 * Load order:
 *   1. _vars.css       (CSS custom properties)
 *   2. base.css        (this file — reset + utilities)
 *   3. components.css  (button / input / card / etc.)
 *   4. <page>.css      (page-specific overrides — optional)
 * ─────────────────────────────────────────────────────────── */

/* ── Reset (modest, not aggressive) ─────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Apple Color Emoji",
                 "Segoe UI Emoji", sans-serif;
    color: var(--text-1);
    background: var(--bg-page);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Typography scale ───────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.875rem; }    /*  30px */
h2 { font-size: 1.5rem;   }    /*  24px */
h3 { font-size: 1.25rem;  }    /*  20px */
h4 { font-size: 1.125rem; }    /*  18px */
h5 { font-size: 1rem;     }    /*  16px */
h6 { font-size: 0.875rem; }    /*  14px */
p  { margin: 0 0 var(--space-3); }
small, .text-sm { font-size: 0.875rem; color: var(--text-2); }
.text-xs   { font-size: 0.75rem; color: var(--text-2); }
.text-bold { font-weight: 600; }
.text-mute { color: var(--text-2); }
.mono      { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

/* ── Layout containers ──────────────────────────────────── */
.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-3);
}
@media (min-width: 768px) {
    .container { max-width: 720px; padding-inline: var(--space-4); }
}
@media (min-width: 1024px) {
    .container { max-width: 960px; }
}
@media (min-width: 1440px) {
    .container { max-width: 1200px; }
}

/* ── Spacing utilities (mt/mb/mx/my + p variants) ─────── */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.p-0  { padding: 0; }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }

/* ── Flex / grid utilities ──────────────────────────────── */
.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1 1 auto; }

.grid        { display: grid; }
.grid-2      { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.grid-3      { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.grid-4      { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Visibility utilities (responsive) ──────────────────── */
.hide-mobile  { display: none; }
@media (min-width: 768px) { .hide-mobile  { display: revert; } }
@media (min-width: 768px) { .show-mobile  { display: none; } }
.hide-tablet  { display: revert; }
@media (min-width: 768px) and (max-width: 1023px) { .hide-tablet  { display: none; } }
.hide-desktop { display: revert; }
@media (min-width: 1024px) { .hide-desktop { display: none; } }

/* ── Touch-target floor — every clickable thing ≥ 44×44 px */
button, .btn, a.btn, [role="button"] {
    min-height: 44px;
    min-width:  44px;
}

/* ── Focus ring (a11y) ──────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-ok);
    outline-offset: 2px;
    border-radius: 4px;
}

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