/*
   Backlink Monkey brand layer. Loaded on every page, after Bootstrap and Rebar.
   Tokens match the brand guide (https://claude.ai/artifact/6MVpKNiQovkASq7S7R59Ez):
   colours sampled from the logo, Inter for all text, statuses always carry their word.
*/
:root {
    /* Brand (from the logo) */
    --monkey-brown: #664532;
    --monkey-brown-deep: #442e23;
    --banana-gold: #f9b200;
    --fur-tan: #eeb286;
    --muzzle-cream: #f0d2bd;
    --tongue-pink: #ff7baa;

    /* Interface */
    --surface: #f6f5f3;
    --surface-raised: #ffffff;
    --surface-tint: #fbf3ec;      /* muzzle-cream at ~40% on white, for quiet panels */
    --border: #e5e7eb;
    --border-strong: #d6d3d1;
    --ink: #404145;
    --muted: #6b7280;

    /* Status */
    --success: #1b5e20;
    --success-bg: #d4f5c7;
    --warning-bg: #fcf6af;
    --danger: #d02d1d;
    --danger-bg: #feecf0;
    --info: #1a73e8;

    /* Type, space, shape */
    --font-sans: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 48px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 21px 0 rgba(135, 140, 157, .2);
    --focus-ring: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--monkey-brown);

    /* Bootstrap, re-pointed at the brand */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--surface);
    --bs-emphasis-color: var(--monkey-brown-deep);
    --bs-heading-color: var(--monkey-brown-deep);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-md);
    --bs-link-color: var(--monkey-brown);
    --bs-link-color-rgb: 102, 69, 50;
    --bs-link-hover-color: var(--monkey-brown-deep);
    --bs-link-hover-color-rgb: 68, 46, 35;
    --bs-primary: var(--monkey-brown);
    --bs-primary-rgb: 102, 69, 50;
    --bs-success-rgb: 27, 94, 32;
    --bs-danger-rgb: 208, 45, 29;
    --bs-focus-ring-color: rgba(102, 69, 50, .35);

    /* Names Rebar's stylesheets use */
    --color-cta: var(--monkey-brown);
    --color-body-font: var(--ink);
    --color-white: var(--surface-raised);
    --color-blue: var(--monkey-brown);
    --color-dark-green: var(--success);
    --color-dark-red: var(--danger);
    --color-validation-red: var(--danger);
    --color-brand-gold: var(--banana-gold);
    --opacity-50: .5;
}

body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--monkey-brown-deep); text-wrap: balance; }
a { color: var(--monkey-brown); text-underline-offset: 2px; }
a:hover { color: var(--monkey-brown-deep); }
code, .mono { font-family: var(--font-mono); }
code { color: var(--monkey-brown-deep); background: var(--surface-tint); padding: 1px 5px; border-radius: 4px; font-size: .85em; }
::selection { background: var(--muzzle-cream); color: var(--monkey-brown-deep); }

/* Focus: one solid ring everywhere */
:focus-visible { outline: 2px solid var(--monkey-brown); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, .btn-check:focus-visible + .btn {
    outline: none; box-shadow: var(--focus-ring); border-color: var(--monkey-brown);
}

/* Buttons */
.btn { font-weight: 600; border-radius: var(--radius-sm); --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .95rem; --bs-btn-font-size: .94rem; }
.btn-sm { --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .84rem; }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.3rem; --bs-btn-font-size: 1.05rem; }
.btn-xs { padding: 2px 8px; font-size: .78rem; font-weight: 600; }

.btn-primary {
    --bs-btn-bg: var(--monkey-brown); --bs-btn-border-color: var(--monkey-brown); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--monkey-brown-deep); --bs-btn-hover-border-color: var(--monkey-brown-deep); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--monkey-brown-deep); --bs-btn-active-border-color: var(--monkey-brown-deep); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--monkey-brown); --bs-btn-disabled-border-color: var(--monkey-brown); --bs-btn-disabled-color: #fff;
}
/* Gold call to action: marketing and sign-up pages only, one per view */
.btn-cta {
    --bs-btn-bg: var(--banana-gold); --bs-btn-border-color: var(--banana-gold); --bs-btn-color: var(--monkey-brown-deep);
    --bs-btn-hover-bg: var(--fur-tan); --bs-btn-hover-border-color: var(--fur-tan); --bs-btn-hover-color: var(--monkey-brown-deep);
    --bs-btn-active-bg: var(--fur-tan); --bs-btn-active-border-color: var(--fur-tan); --bs-btn-active-color: var(--monkey-brown-deep);
    font-weight: 700;
}
.btn-outline-secondary, .btn-light, .btn-secondary {
    --bs-btn-bg: var(--surface-raised); --bs-btn-color: var(--monkey-brown-deep); --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--surface-raised); --bs-btn-hover-color: var(--monkey-brown-deep); --bs-btn-hover-border-color: var(--monkey-brown);
    --bs-btn-active-bg: var(--muzzle-cream); --bs-btn-active-color: var(--monkey-brown-deep); --bs-btn-active-border-color: var(--monkey-brown);
    --bs-btn-disabled-bg: var(--surface-raised); --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-border-color: var(--border);
}
.btn-check:checked + .btn-outline-secondary { background: var(--muzzle-cream); color: var(--monkey-brown-deep); border-color: var(--monkey-brown); }
.btn-outline-primary {
    --bs-btn-color: var(--monkey-brown); --bs-btn-border-color: var(--monkey-brown); --bs-btn-bg: var(--surface-raised);
    --bs-btn-hover-bg: var(--monkey-brown); --bs-btn-hover-border-color: var(--monkey-brown); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--monkey-brown-deep); --bs-btn-active-border-color: var(--monkey-brown-deep); --bs-btn-active-color: #fff;
}
.btn-outline-danger {
    --bs-btn-bg: var(--surface-raised); --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--danger);
}
/* Solid danger: only the confirming step of a destructive action */
.btn-danger {
    --bs-btn-bg: var(--danger); --bs-btn-color: #fff; --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: #a92314; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #a92314;
    --bs-btn-active-bg: #a92314; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #a92314;
}
/* Upgrade prompts inside the app: cream, not gold */
.btn-outline-warning, .btn-warning, .btn-upgrade {
    --bs-btn-bg: var(--muzzle-cream); --bs-btn-color: var(--monkey-brown-deep); --bs-btn-border-color: var(--muzzle-cream);
    --bs-btn-hover-bg: var(--fur-tan); --bs-btn-hover-color: var(--monkey-brown-deep); --bs-btn-hover-border-color: var(--fur-tan);
    --bs-btn-active-bg: var(--fur-tan); --bs-btn-active-color: var(--monkey-brown-deep); --bs-btn-active-border-color: var(--fur-tan);
}
.btn-link { --bs-btn-color: var(--monkey-brown); --bs-btn-hover-color: var(--monkey-brown-deep); font-weight: 600; }

/* Forms */
.form-label, label { font-weight: 600; color: var(--monkey-brown-deep); font-size: .9rem; }
.form-check-label { font-weight: 400; color: var(--ink); }
.form-control, .form-select { border-color: var(--border-strong); border-radius: var(--radius-sm); color: var(--ink); }
.form-control::placeholder { color: #9a9ca3; }
.form-text { color: var(--muted); }
.form-check-input:checked { background-color: var(--monkey-brown); border-color: var(--monkey-brown); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23664532'/%3e%3c/svg%3e"); }

/* Status badges: the word always carries the meaning; colour backs it up */
.badge { font-weight: 600; font-size: .74rem; padding: .3em .7em; border-radius: var(--radius-pill); border: 1px solid transparent; letter-spacing: 0; }
.text-bg-success { background: var(--success-bg) !important; color: var(--success) !important; }
.text-bg-danger { background: var(--danger-bg) !important; color: var(--danger) !important; }
.text-bg-warning { background: var(--warning-bg) !important; color: var(--monkey-brown-deep) !important; border-color: var(--border) !important; }
.text-bg-info { background: var(--info) !important; color: #fff !important; }
.text-bg-primary { background: var(--muzzle-cream) !important; color: var(--monkey-brown-deep) !important; }
.text-bg-light { background: var(--surface-raised) !important; color: var(--muted) !important; border-color: var(--border) !important; }
.text-bg-secondary { background: var(--border) !important; color: var(--ink) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }

/* Alerts */
.alert { border-radius: var(--radius-md); border-width: 1px; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: #b9e8a8; }
.alert-danger { background: var(--danger-bg); color: var(--danger); border-color: #f8c9d3; }
.alert-warning { background: var(--warning-bg); color: var(--monkey-brown-deep); border-color: #ece28a; }
.alert-secondary, .alert-light { background: var(--surface-tint); color: var(--monkey-brown-deep); border-color: var(--muzzle-cream); }
.alert a { color: inherit; font-weight: 600; }

/* Tables, tabs, dropdowns */
.table { --bs-table-color: var(--ink); --bs-table-hover-bg: var(--surface-tint); --bs-table-border-color: var(--border); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-color: var(--monkey-brown-deep); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface-raised); }
.nav-tabs .nav-link { color: var(--muted); font-weight: 600; font-size: .9rem; }
.nav-tabs .nav-link.active { color: var(--monkey-brown-deep); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--muzzle-cream); --bs-dropdown-link-active-color: var(--monkey-brown-deep); --bs-dropdown-border-color: var(--border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(68, 46, 35, .12); }
.tooltip { --bs-tooltip-bg: var(--monkey-brown-deep); }
.list-group { --bs-list-group-border-color: var(--border); --bs-list-group-color: var(--ink); }

/* The wordmark typed next to the icon (the stacked logo doesn't fit in a bar) */
.bm-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--monkey-brown-deep); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.bm-brand:hover { color: var(--monkey-brown-deep); }
.bm-brand img { width: 34px; height: 34px; }

/* Shared helpers */
.muted { color: var(--muted); }
.small-muted { color: var(--muted); font-size: .82rem; }
.text-break-all { word-break: break-all; }
.inline-form { display: inline; }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--monkey-brown); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}