/* ================================================================
   CORE.CSS — Nexora foundation layer (reset + base type/color)
   Depends on root-tokens.css. Reference every value through a
   token — never hardcode a color/size that already has one.
   ================================================================ */

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

html {
    background: var(--color-background);
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-400);
    line-height: var(--leading-normal);
    background: var(--color-background);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Compensates for .header-section being position: fixed (see
       header.css) — keeps page content starting right below the
       header instead of sliding underneath it. Kept in lockstep
       with .header-section's height at both breakpoints. */
    padding-top: 44px;
}

@media (max-width: 750px) {
    body {
        padding-top: 48px;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-500);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

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

/* ----------------------------------------------------------------
   LOGO — shared between header and footer, defined once here so
   both use the exact same mark instead of two copies drifting apart.
   ---------------------------------------------------------------- */
.logo-link {
    display: flex;
    align-items: center;
    padding: var(--space-8);
    margin: calc(var(--space-8) * -1);
    border-radius: var(--radius-md);
}

.logo-img {
    height: 24px;
    width: auto;
}

/* ----------------------------------------------------------------
   BUTTONS — shared across header, footer, and every page
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-24);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-600);
    border-radius: var(--radius-full);
    border: var(--border-width-thin) solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.btn-lg {
    padding: var(--space-16) var(--space-32);
    font-size: var(--font-size-base);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-primary:active {
    background: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

/* Exactly two button styles exist site-wide: .btn-primary and
   .btn-secondary. Neither changes appearance based on what's behind it —
   same rest/hover/active colors everywhere, no on-dark modifier. */
.btn-secondary {
    background: var(--color-background);
    color: var(--color-text);
    border-color: var(--color-background);
}

.btn-secondary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-on-primary);
}

.btn-secondary:active {
    background: var(--color-primary-active);
    border-color: var(--color-primary-active);
    color: var(--color-text-on-primary);
}