/*
    seep-server-api/site/static/assets/seep-web.css

    The single source of truth for the Seep WEB pages' design system — the
    landing page (login.html), the onboarding wizard (welcome.html), and the
    account site (account.html). Served from the /site-assets mount
    (_NoCacheStaticFiles, so an edit reaches the browser on next load, never
    stale). Page-specific LAYOUT stays inline in each page; this file owns the
    shared LANGUAGE: tokens, the type system, and the button/heading primitives,
    so the three pages can no longer drift apart (they used to each declare the
    same palette separately — that is the coherence bug this file closes).

    Type: headings + the wordmark are Schibsted Grotesk (loaded by each page's
    own <link> so the critical font request isn't gated behind this stylesheet);
    body stays the system stack. The EXTENSION surfaces (panel + sidebar) keep
    100% system fonts on purpose — they are shadow-DOM injected into arbitrary
    pages and "the product never loads webfonts" (see CLAUDE.md). This file is
    web-only; it never ships inside the extension.

    Palette is unchanged from site/BRAND.md — every value already lives in the
    product (panel/sidebar/account). Coherence here means honoring these tokens
    everywhere, not inventing new ones.
*/

:root {
    color-scheme: light;

    /* ── Neutrals (the web pages are always light; product surfaces own dark) ── */
    --snow: #ffffff;   /* page background */
    --tile: #f9fafb;   /* cards, alternate bands */
    --line: #e5e7eb;   /* hairlines, 2px card borders on marketing */
    --ink:  #1f2430;   /* body text */
    --muted:#6b7280;   /* secondary text, captions */
    --head: #14161c;   /* heading black + the dark banners */

    /* ── Seep blues (brand + interaction) ── */
    --sky:  #59b2fd;   /* the product accent — wordmark, buttons, links */
    --deep: #3f82d0;   /* button press-shadow, hover, small links */
    --wash: rgba(100, 150, 250, 0.14);   /* translated-sentence chip tint */

    /* ── Type ──
       --display drives every heading + the wordmark. Schibsted Grotesk first,
       then the system stack as the swap/no-webfont fallback so a heading is
       never invisible while the font loads. --font is the body stack. */
    --display: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
    --font:    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* ── Geometry (BRAND.md: 16px button radius, 24px card radius) ── */
    --radius-btn:  16px;
    --radius-card: 24px;
}

/* ── The signature button (BRAND.md): solid fill, bold uppercase, rounded;
   press dims it. One owner for every CTA across the web pages. ── */
.btn {
    appearance: none;
    display: inline-block;
    border: none;
    border-radius: var(--radius-btn);
    padding: 13px 24px 12px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: filter 0.1s ease;
    position: relative;
}
.btn:active { filter: brightness(0.94); }
.btn--cta { background: var(--sky); color: #fff; }
.btn--cta:hover { filter: brightness(1.06); }
.btn--big { font-size: 16px; padding: 16px 32px 15px; }