/* Store Operations Manager — brand system.

   The single source of truth for the Store Operations Manager visual identity:
   design tokens (the palette + type stacks) as CSS custom properties,
   plus a small set of primitives (button, .eyebrow) that BOTH the
   marketing landing page and the authenticated app can build on.

   Page-specific styling does NOT live here — the landing keeps its own
   layout rules in landing.css and the app shell keeps its in app.css.
   Keep this file to tokens + genuinely shared primitives so the
   app-wide rebrand (PR18) can adopt it wholesale without inheriting the
   landing page's layout. */

:root {
    /* ── Ground / ink (deep ink-green) ─────────────────────────────── */
    --ink: #0E1A17;
    --ink-2: #14241F;
    --ink-3: #1B2F28;

    /* ── Paper (warm) ──────────────────────────────────────────────── */
    --paper: #F7F5EF;
    --paper-2: #EFEADD;

    /* ── Copper penny accent ───────────────────────────────────────── */
    --copper: #C1793E;
    --copper-bright: #D48F4E;
    --copper-deep: #8A5326;

    /* ── Vault green ────────────────────────────────────────────────── */
    --vault: #23564A;
    --vault-bright: #3B7C69;

    /* ── Text ──────────────────────────────────────────────────────── */
    --text: #16211D;
    --muted: #6E6A5E;

    /* On-ink text (for the dark ground sections) */
    --on-ink: #F1EEE6;
    --on-ink-muted: rgba(241, 238, 230, .64);

    /* Hairlines */
    --line: rgba(22, 33, 29, .14);
    --line-ink: rgba(241, 238, 230, .14);

    /* Semantic */
    --ok: #4C8A64;

    /* ── Type stacks (all system/local; NO webfont, no CDN) ────────── */
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

    /* Layout */
    --wrap: 1140px;
}

/* ── Shared primitives ─────────────────────────────────────────────── */

/* Eyebrow: the small monospaced uppercase kicker above a heading.
   Copper on paper; brighter copper when placed on an ink ground
   (add .on-ink to an ancestor). */
.eyebrow {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--copper-deep);
    font-weight: 600;
}
.on-ink .eyebrow {
    color: var(--copper-bright);
}

/* Buttons. The copper primary and the ghost outline are the two
   brand-standard actions; both the landing and the app can use them. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: var(--sans);
    font-weight: 600;
    font-size: .98rem;
    padding: .82em 1.35em;
    border-radius: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn:focus-visible {
    outline: 2px solid var(--copper);
    outline-offset: 3px;
}
.btn-primary {
    background: var(--copper);
    color: #faf6ee;
    border-color: var(--copper);
}
.btn-primary:hover {
    background: var(--copper-bright);
    transform: translateY(-1px);
}
.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
}
.btn-ghost:hover {
    border-color: var(--text);
}
.on-ink .btn-ghost {
    color: var(--on-ink);
    border-color: var(--line-ink);
}
.on-ink .btn-ghost:hover {
    border-color: var(--on-ink);
}