/* ──────────────────────────────────────────────────────────────────────────
   Mountain Memory — shared web brand stylesheet
   ────────────────────────────────────────────────────────────────────────────
   Single source of truth for the styling common to every public web page
   (marketing landing, invite/verify-email fallbacks, privacy, imprint). Each
   page links this and keeps only its page-specific rules inline, AFTER the
   <link> so a page can still override.

   Served at /assets/brand.css (the /assets/** path is already permitAll in
   SecurityConfig). In dev it is served from disk via the file: entry in
   spring.web.resources.static-locations, so edits show on the next request
   without a rebuild — the same hot-edit loop the HTML pages already get.

   System serif/sans stack only — NOT hotlinked Google Fonts (a German operator
   embedding fonts.googleapis.com transmits the visitor IP to Google, a
   documented GDPR liability). Tokens mirror the mobile app's BrandMark.tsx.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --bg: #1a0e08;
    --surface: #221610;
    --surface-hi: #2c1d12;
    --border: #3d2818;
    --ink: #ead4b0;
    --ink-soft: #c4a880;
    --ink-mute: #9a8060;
    --ink-tertiary: #9a8060;
    --accent: #c79661;
    --rotpunkt: #e25a35;
    --serif: Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    min-height: 100vh;
}

/* ── Brand mark ─────────────────────────────────────────────────────────────
   Filled rotpunkt + uppercase letterspaced wordmark. Now an <a> linking home
   (/) on every surface — so text-decoration:none and an inherited cursor are
   part of the base. Pages add their own alignment: landing surfaces center it
   (.brand { justify-content: center }); the legal pages anchor it top-left with
   a bottom margin (.brand { margin-bottom: 40px }). */
.brand {
    display: flex;
    align-items: center;
    gap: 8px;                /* matches the app's cabin.space.sm */
    text-decoration: none;
    width: fit-content;
}
.rotpunkt {
    display: inline-block;
    width: 9px;              /* matches the app's <Rotpunkt size={9} /> */
    height: 9px;
    background: var(--rotpunkt);
    border-radius: 50%;
}
.brand-word {
    font-size: 10px;         /* matches the app's BrandMark wordmark */
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 500;
}

/* ── App-store buttons (invite + verify-email fallbacks) ────────────────────
   TODO MVP2: replace the placeholder hrefs with the real store URLs (and, once
   the TestFlight public link is enabled, an env-driven single source of truth
   shared with the marketing CTA). */
.stores {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: var(--bg);
    padding: 10px 22px;
    border-radius: 10px;
    text-decoration: none;
    min-width: 220px;
}
.store-btn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.store-btn-small {
    font-size: 9px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.75;
}
.store-btn-big {
    font-size: 16px;
    font-weight: 500;
}