/* ============================================================
   Atlas Base — opt-in defaults for pages migrating to the new
   foundation. Does NOT touch html/body globally so existing
   pages aren't disturbed. Apply `class="f-shell"` to a page's
   root container to inherit these defaults.

   For typography classes, use the f-h1..f-h6, f-body, f-caption
   helpers below — they set family/size/weight/line-height in
   one place per the brand trio (Mona Sans / Inter / Druk Wide).
   ============================================================ */

/* -------- Shell: opt-in body/page defaults -------- */
.f-shell {
    font-family: var(--f-font-body);
    font-size: var(--f-fs-md);
    line-height: var(--f-lh-normal);
    color: var(--f-ink);
    background: var(--f-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* -------- Selection -------- */
.f-shell ::selection {
    background: var(--f-accent-soft);
    color: var(--f-ink);
}

/* -------- Focus visible — accessible default for any new component -------- */
.f-shell :focus-visible,
.f-focusable:focus-visible {
    outline: 2px solid var(--f-border-focus);
    outline-offset: 2px;
    border-radius: var(--f-radius-xs);
}

/* -------- Typography helpers — per brand trio.
   Mona Sans = main titles + buttons.
   Inter     = subtitles, body, captions, labels.
   Druk Wide = wordmark only (do not apply elsewhere). -------- */

.f-h1 {
    font-family: var(--f-font-display);
    font-size: var(--f-fs-5xl);
    font-weight: var(--f-fw-bold);
    line-height: var(--f-lh-tight);
    letter-spacing: var(--f-ls-tight);
    color: var(--f-ink);
    margin: 0;
}
.f-h2 {
    font-family: var(--f-font-display);
    font-size: var(--f-fs-4xl);
    font-weight: var(--f-fw-bold);
    line-height: var(--f-lh-tight);
    letter-spacing: var(--f-ls-tight);
    color: var(--f-ink);
    margin: 0;
}
.f-h3 {
    font-family: var(--f-font-body);
    font-size: var(--f-fs-2xl);
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-lh-snug);
    color: var(--f-ink);
    margin: 0;
}
.f-h4 {
    font-family: var(--f-font-body);
    font-size: var(--f-fs-xl);
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-lh-snug);
    color: var(--f-ink);
    margin: 0;
}
.f-h5 {
    font-family: var(--f-font-body);
    font-size: var(--f-fs-lg);
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-lh-snug);
    color: var(--f-ink);
    margin: 0;
}
.f-h6 {
    font-family: var(--f-font-body);
    font-size: var(--f-fs-md);
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-lh-snug);
    color: var(--f-ink);
    margin: 0;
}

.f-eyebrow {
    font-family: var(--f-font-body);
    font-size: var(--f-fs-xs);
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-lh-snug);
    letter-spacing: var(--f-ls-wider);
    text-transform: uppercase;
    color: var(--f-ink-soft);
}

.f-body {
    font-family: var(--f-font-body);
    font-size: var(--f-fs-md);
    font-weight: var(--f-fw-regular);
    line-height: var(--f-lh-normal);
    color: var(--f-ink);
}
.f-body-sm {
    font-family: var(--f-font-body);
    font-size: var(--f-fs-sm);
    font-weight: var(--f-fw-regular);
    line-height: var(--f-lh-normal);
    color: var(--f-ink-soft);
}
.f-caption {
    font-family: var(--f-font-body);
    font-size: var(--f-fs-xs);
    font-weight: var(--f-fw-regular);
    line-height: var(--f-lh-snug);
    color: var(--f-ink-muted);
}

.f-mono {
    font-family: var(--f-font-mono);
    font-size: var(--f-fs-xs);
    letter-spacing: var(--f-ls-wide);
    color: var(--f-ink-muted);
}

/* -------- Wordmark — only valid use of Druk Wide (paired with the icon).
   Never apply outside the lockup. -------- */
.f-wordmark {
    font-family: var(--f-font-wordmark);
    font-weight: var(--f-fw-bold);
    letter-spacing: var(--f-ls-tight);
    line-height: 1;
    color: var(--f-ink);
}

/* -------- Link default -------- */
.f-shell a,
a.f-link {
    color: var(--f-accent);
    text-decoration: none;
    transition: color var(--f-dur-fast) var(--f-ease-out);
}
.f-shell a:hover,
a.f-link:hover {
    color: var(--f-accent-hover);
    text-decoration: underline;
}

/* -------- Divider -------- */
.f-divider {
    border: 0;
    border-top: 1px solid var(--f-border-soft);
    margin: 0;
}
.f-divider--strong { border-top-color: var(--f-border); }