/* ============================================================================
   Vanishly — base styles
   Loaded on every page after tokens.css. Establishes typography baseline,
   focus model, layout primitives, and reusable button styles.
   ============================================================================ */


/* ---- reset (intentional, not utility-first) ------------------------------ */

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    tab-size: 4;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-base);
    letter-spacing: var(--tracking-snug);
    accent-color: var(--color-brand-primary);
}

::selection {
    background: var(--color-selection);
    color: var(--color-text);
}

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


/* ---- typography ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-hero); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); font-weight: var(--weight-medium); }

p { margin: 0; }

small { font-size: var(--text-sm); color: var(--color-text-muted); }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-line), transparent);
    margin-block: var(--space-5);
}


/* ---- links --------------------------------------------------------------- */

a {
    color: var(--color-brand-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-brand-primary-line);
    transition:
        color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}

a:hover {
    color: var(--color-brand-primary-deep);
    border-bottom-color: var(--color-brand-primary);
}

a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-xs);
}


/* ---- form elements ------------------------------------------------------- */

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

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


/* ---- buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-snug);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn--primary {
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-brand-primary);
}
.btn--primary:hover  { background: var(--color-brand-primary-deep); border-color: var(--color-brand-primary-deep); }
.btn--primary:active { transform: translateY(1px); }

.btn--accent {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
}
.btn--accent:hover  { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn--accent:active { transform: translateY(1px); }

.btn--outline {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-line-strong);
}
.btn--outline:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }

.btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    padding-inline: var(--space-3);
}
.btn--ghost:hover { color: var(--color-text); }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ---- layout primitives --------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-base);
    margin-inline: auto;
    padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }
.container--full   { max-width: var(--container-full); }

.stack > * + *         { margin-top: var(--space-4); }
.stack--tight > * + *  { margin-top: var(--space-2); }
.stack--loose > * + *  { margin-top: var(--space-6); }
.stack--airy  > * + *  { margin-top: var(--space-7); }

.row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.row--between { justify-content: space-between; }
.row--end     { justify-content: flex-end; }
.row--center  { justify-content: center; }


/* ---- text utilities (sparing — prefer semantic classes) ---------------- */

.muted   { color: var(--color-text-muted); }
.dim     { color: var(--color-text-dim); }
.caption {
    font-size: var(--text-xs);
    color: var(--color-text-dim);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-weight: var(--weight-medium);
}


/* ---- reusable components (consumed by partials) ----------------------- */

/* brand-mark — sizing comes from inline width/height attrs on the SVG.
   This class exists for parent-selector targeting only. */
.brand-mark { display: inline-block; vertical-align: middle; }

/* wordmark lockup — mark + "Vanishly" text on the same baseline */
.wordmark {
    display: inline-flex;
    align-items: center;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 0;
}
a.wordmark:hover { color: var(--color-brand-primary); }

.wordmark__mark { margin-right: 0;  }
.wordmark__text {
    font-weight: var(--weight-medium);
    letter-spacing: -0.01em;       /* per brand spec */
    color: inherit;
}

.wordmark--sm { gap: 6px; }
.wordmark--sm .wordmark__text { font-size: 12px; }

.wordmark--md { gap: 8px; }
.wordmark--md .wordmark__text { font-size: 14px; }

.wordmark--lg { gap: 10px; }
.wordmark--lg .wordmark__text { font-size: 20px; }


/* page integrity build hash badge */
.build-hash {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-left: var(--space-3);
    margin-left: var(--space-3);
    border-left: 1px solid var(--color-line);
    font-size: 10px;
    color: var(--color-text-dim);
    letter-spacing: 0;
    text-transform: none;
}

.build-hash__label {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: 9px;
}

.build-hash__sep { color: var(--color-line-strong); }

.build-hash__hash {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-muted);
}

.build-hash__verify {
    margin-left: var(--space-1);
    color: var(--color-text-dim);
    border-bottom-color: var(--color-line-subtle);
    font-size: 10px;
}

.build-hash__verify:hover {
    color: var(--color-text-muted);
    border-bottom-color: var(--color-line);
}


/* ---- accessibility ----------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* HTML5 `hidden` attribute must beat any author display rule. Without
 * this, an element styled `display: flex` (or anything other than the
 * UA `display: none`) stays visible even when JS sets hidden=true. */
[hidden] {
    display: none !important;
}

/* Honeypot container — CI4's Honeypot filter injects its trap field
   inside <div class="hpc">. We hide it via class (CSP forbids inline
   styles), and pin it absolute so it doesn't claim layout space. */
.hpc {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-xs);
}