/*
 * MomentHive app theme.
 *
 * These design tokens (colors, fonts, spacing) are the single source of
 * truth from the marketing site (momenthive.co.uk marketing repo,
 * styles/styles.css) and must stay in sync with it - this file adapts
 * that same look onto Bootstrap 5's component classes rather than
 * introducing a different palette.
 *
 * Loaded after bootstrap.min.css and site.css so these rules win.
 */

:root {
    --ink: #14161f;
    --ink-soft: #3a3d4a;
    --paper: #faf7f2;
    --paper-alt: #f1ece2;
    --card: #ffffff;
    --line: #e7e0d3;
    --gold-light: #f6b73c;
    --gold: #e8971f;
    --gold-dark: #c96f0c;
    --gold-gradient: linear-gradient(135deg, var(--gold-light), var(--gold-dark));

    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --radius: 14px;

    /* Re-point Bootstrap's own theme variables at the same tokens so
       components that read --bs-* directly (buttons, forms, links,
       borders) pick up the brand automatically. */
    --bs-body-font-family: var(--font-body);
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--radius);
    --bs-link-color: var(--gold-dark);
    --bs-link-color-rgb: 201, 111, 12;
    --bs-link-hover-color: var(--ink);
    --bs-link-hover-color-rgb: 20, 22, 31;
    --bs-primary: var(--gold);
    --bs-primary-rgb: 232, 151, 31;
    --bs-secondary: var(--ink);
    --bs-secondary-rgb: 20, 22, 31;
}

body {
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
}

a {
    text-decoration-color: rgba(201, 111, 12, 0.35);
}

.text-muted {
    color: var(--ink-soft) !important;
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    background: var(--gold-gradient);
    border-color: transparent;
    color: var(--ink);
    box-shadow: 0 6px 16px rgba(201, 111, 12, 0.25);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(201, 111, 12, 0.32);
}

.btn-primary:active,
.btn-primary:focus-visible {
    color: var(--ink) !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-dark:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.btn-link {
    color: var(--gold-dark);
}

.btn-link:hover {
    color: var(--ink);
}

/* Status-coloured buttons (success/warning/danger) keep their semantic
   hue for clarity - only the shape/weight is brought in line. */
.btn-success, .btn-outline-success,
.btn-warning, .btn-outline-warning,
.btn-danger, .btn-outline-danger {
    font-weight: 600;
}

/* ---------- Forms ---------- */

.form-control,
.form-select {
    border-color: var(--line);
    border-radius: 10px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232, 151, 31, 0.15);
}

.form-check-input {
    accent-color: var(--gold-dark);
}

.form-check-input:checked {
    background-color: var(--gold-dark);
    border-color: var(--gold-dark);
}

.form-check-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232, 151, 31, 0.15);
}

.form-label {
    font-weight: 600;
    color: var(--ink);
}

.form-text {
    color: var(--ink-soft);
}

/* ---------- Cards / surfaces ---------- */

.card {
    border-color: var(--line);
    border-radius: var(--radius);
}

.table {
    --bs-table-border-color: var(--line);
}

.alert {
    border-radius: 10px;
}

hr {
    border-top-color: var(--line);
}

/* ---------- Header / nav ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 247, 242, 0.9);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}

.site-header .navbar-brand {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0;
}

.site-header .navbar-brand img {
    height: 40px;
}

.site-header .nav-link {
    color: var(--ink-soft) !important;
    font-weight: 500;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--ink) !important;
}

.site-header .navbar-toggler {
    border-color: var(--line);
}

.site-header .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(232, 151, 31, 0.25);
}

/* ---------- Footer ---------- */

.site-footer {
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.site-footer a {
    color: var(--ink-soft);
}

.site-footer a:hover {
    color: var(--gold-dark);
}