/* ==========================================================================
   BrainerBot — Theme Tokens
   Orange-ambient editorial light theme. Distinct from StreamyBD's vivid
   marketplace vibe: deeper amber-orange, warm stone neutrals, Fraunces
   display serif paired with DM Sans body.
   ========================================================================== */

:root {
    /* Brand ---------------------------------------------------------------- */
    --bb-primary: #ea580c;          /* deep amber-orange */
    --bb-primary-hover: #c2410c;
    --bb-secondary: #fb923c;        /* softer orange accent */
    --bb-primary-soft: #fff7ed;     /* ambient wash */
    --bb-primary-soft-2: #ffedd5;   /* slightly stronger wash */
    --bb-ring: rgba(234, 88, 12, .22);

    /* Surfaces (warm stone, not neutral gray) ------------------------------ */
    --bb-bg: #fafaf9;               /* stone-50 */
    --bb-surface: #ffffff;
    --bb-surface-2: #f5f5f4;        /* stone-100 */
    --bb-surface-tint: #fffbf5;     /* barely-there warm tint for cards */

    /* Text ------------------------------------------------------------------ */
    --bb-text: #1c1917;             /* stone-900 */
    --bb-text-muted: #57534e;       /* stone-600 */
    --bb-text-faint: #a8a29e;       /* stone-400 */

    /* Borders --------------------------------------------------------------- */
    --bb-border: #e7e5e4;           /* stone-200 */
    --bb-border-strong: #d6d3d1;    /* stone-300 */

    /* Status ---------------------------------------------------------------- */
    --bb-ok: #16a34a;
    --bb-warn: #d97706;
    --bb-danger: #dc2626;

    /* Layout ---------------------------------------------------------------- */
    --bb-radius-sm: 10px;
    --bb-radius: 14px;
    --bb-radius-lg: 20px;
    --bb-radius-xl: 28px;
    --bb-shadow-sm: 0 1px 2px rgba(28, 25, 23, .04), 0 1px 3px rgba(28, 25, 23, .06);
    --bb-shadow: 0 4px 12px rgba(28, 25, 23, .06), 0 2px 4px rgba(28, 25, 23, .04);
    --bb-shadow-lg: 0 16px 40px rgba(234, 88, 12, .10), 0 4px 12px rgba(28, 25, 23, .06);

    /* Typography ------------------------------------------------------------ */
    --bb-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --bb-font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Nav heights ----------------------------------------------------------- */
    --bb-nav-top: 64px;
    --bb-nav-bottom: 64px;

    /* Breakpoint helpers ---------------------------------------------------- */
    --bb-bp-md: 768px;
}

/* Reset & base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--bb-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--bb-text);
    background: var(--bb-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Ambient warm wash — very subtle */
    background-image:
        radial-gradient(1200px 600px at 100% -10%, rgba(251, 146, 60, .08), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(234, 88, 12, .05), transparent 60%);
    background-attachment: fixed;
}

/* Leave room for bottom nav on mobile, no pad on desktop */
@media (max-width: 767.98px) {
    body { padding-bottom: calc(var(--bb-nav-bottom) + env(safe-area-inset-bottom, 0px)); }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* Display headings get Fraunces */
h1, h2, h3, .bb-display {
    font-family: var(--bb-font-display);
    font-weight: 500;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 50, "WONK" 0;
    letter-spacing: -0.01em;
    color: var(--bb-text);
}
h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 0 0 .5rem; }
h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.2; margin: 0 0 .5rem; }
h3 { font-size: 18px; line-height: 1.3; margin: 0 0 .25rem; }

/* Utility ------------------------------------------------------------------- */
.bb-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 768px) {
    .bb-container { padding: 0 24px; }
}

.bb-muted { color: var(--bb-text-muted); }
.bb-hide-mobile { display: none; }
.bb-hide-desktop { display: initial; }
@media (min-width: 768px) {
    .bb-hide-mobile { display: initial; }
    .bb-hide-desktop { display: none; }
}

/* Buttons ------------------------------------------------------------------- */
.bb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--bb-radius);
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    white-space: nowrap;
}
.bb-btn-primary {
    background: var(--bb-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(234, 88, 12, .25);
}
.bb-btn-primary:hover { background: var(--bb-primary-hover); transform: translateY(-1px); }
.bb-btn-primary:active { transform: translateY(0); }
.bb-btn-ghost {
    background: var(--bb-surface);
    color: var(--bb-text);
    border-color: var(--bb-border);
}
.bb-btn-ghost:hover { background: var(--bb-surface-2); border-color: var(--bb-border-strong); }