/* =============================================================
   BrewPass v2 · Design tokens
   Single source of truth: colors, typography, motion, geometry.
   Extracted from BrewPass DS (Claude Design preview files).
   ============================================================= */

:root {
    /* ─── Cream surface family ────────────────────────── */
    --bp-cream:        #F2EAD8;
    --bp-cream-2:      #E8DCC8;
    --bp-cream-3:      #D9CEBA;
    --bp-paper:        #FFFDF8;
    --bp-white:        #FFFFFF;

    /* ─── Espresso text family ─────────────────────────  */
    --bp-espresso:     #3D2B1A;
    --bp-espresso-2:   #7A5C3A;
    --bp-espresso-3:   #B89A78;
    --bp-ink:          #15110C;

    /* ─── Pistachio accent family ───────────────────────  */
    --bp-pistachio:    #5C8A3C;
    --bp-pistachio-d:  #3D6B22;
    --bp-pistachio-l:  #7BAD57;
    --bp-pistachio-xl: #C8DFB4;
    --bp-pistachio-xxl:#EBF4E2;

    /* ─── Status colors ─────────────────────────────────  */
    --bp-warn:         #C97B12;
    --bp-warn-soft:    #FBE4D0;
    --bp-error:        #C0392B;
    --bp-ember:        #E07A2B;

    /* ─── Semantic aliases ──────────────────────────────  */
    --bp-bg:           var(--bp-cream);
    --bp-fg:           var(--bp-espresso);
    --bp-fg-2:         var(--bp-espresso-2);
    --bp-fg-3:         var(--bp-espresso-3);
    --bp-border:       var(--bp-cream-3);

    /* ─── Typography ────────────────────────────────────  */
    --bp-font:      'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bp-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
    /* Aliases that some older selectors used in Onboarding file */
    --bp-mono:      var(--bp-font-mono);

    /* ─── Motion ────────────────────────────────────────  */
    --bp-ease-out:  cubic-bezier(.22, 1, .36, 1);
    --bp-ease-press: cubic-bezier(.34, 1.56, .64, 1);
    --bp-dur-press: 150ms;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
* { margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--bp-cream);
    color: var(--bp-fg);
    font-family: var(--bp-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
}

body {
    min-height: 100vh;
    /* Safe-area aware padding so floating bottom nav doesn't cover content */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

/* ─── Screen base (replaces preview .scr wrappers) ──────── */
.screen {
    display: none;
    width: 100%;
    min-height: 100vh;
}
.screen.active {
    display: flex;
    flex-direction: column;
    animation: bp-screen-in .28s var(--bp-ease-out) both;
}
@keyframes bp-screen-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Utility: tabular numbers for prices and times ─────── */
.bp-tnum, .num, .mono, .pr, .price-cost, .price-retail,
.metric-val, .pass-num, .pass-bottom .val {
    font-variant-numeric: tabular-nums;
}