/* ═══════════════════════════════════════════════════
   CreepingScope — Bootstrap overrides
   Brand palette from landing page, applied to the
   platform via Bootstrap 5.3 CSS custom properties.
   ═══════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Instrument+Serif:ital@0;1&display=swap');

/* ── Brand tokens (for reference / reuse) ── */
:root {
    --cs-cream: #faf6f1;
    --cs-cream-dk: #f0eae2;
    --cs-warm-white: #fffcf8;
    --cs-text: #2d2a26;
    --cs-text-soft: #6b6560;
    --cs-text-muted: #9b9590;
    --cs-amber: #d4873f;
    --cs-amber-hover: #c07536;
    --cs-amber-active: #a8662f;
    --cs-amber-lt: #f5e6d3;
    --cs-sage: #7a9b7e;
    --cs-sage-hover: #6a896e;
    --cs-sage-active: #5d7961;
    --cs-sage-lt: #e4efe6;
    --cs-rose: #c47a7a;
    --cs-rose-hover: #b46969;
    --cs-rose-active: #a25b5b;
    --cs-rose-lt: #f5e5e5;
    --cs-gold: #d4a843;
    --cs-gold-hover: #c09538;
    --cs-gold-active: #a9832f;
    --cs-gold-lt: #f5eddb;
    --cs-steel: #6b94a8;
    --cs-steel-hover: #5c8293;
    --cs-steel-active: #507280;
    --cs-steel-lt: #e3ecf0;
    --cs-border: #e8e2da;
    --cs-serif: 'Instrument Serif', Georgia, serif;
    --cs-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}


/* ═══════════════════════════════════════════════════
   ROOT / BODY
   ═══════════════════════════════════════════════════ */

:root {
    --bs-body-font-family: var(--cs-sans);
    --bs-body-bg: var(--cs-cream);
    --bs-body-bg-rgb: 250, 246, 241;
    --bs-body-color: var(--cs-text);
    --bs-body-color-rgb: 45, 42, 38;

    --bs-white: var(--cs-warm-white);
    --bs-white-rgb: 255, 252, 248;
    --bs-light: var(--cs-cream);
    --bs-light-rgb: 250, 246, 241;

    /* Semantic colors */
    --bs-primary: var(--cs-amber);
    --bs-primary-rgb: 212, 135, 63;
    --bs-success: var(--cs-sage);
    --bs-success-rgb: 122, 155, 126;
    --bs-danger: var(--cs-rose);
    --bs-danger-rgb: 196, 122, 122;
    --bs-warning: var(--cs-gold);
    --bs-warning-rgb: 212, 168, 67;
    --bs-info: var(--cs-steel);
    --bs-info-rgb: 107, 148, 168;
    --bs-secondary: var(--cs-text-soft);
    --bs-secondary-rgb: 107, 101, 96;

    /* Borders */
    --bs-border-color: var(--cs-border);
    --bs-border-color-translucent: rgba(45, 42, 38, 0.12);

    /* Subtle backgrounds (badges, alerts) */
    --bs-primary-bg-subtle: var(--cs-amber-lt);
    --bs-success-bg-subtle: var(--cs-sage-lt);
    --bs-danger-bg-subtle: var(--cs-rose-lt);
    --bs-warning-bg-subtle: var(--cs-gold-lt);
    --bs-info-bg-subtle: var(--cs-steel-lt);
    --bs-secondary-bg-subtle: var(--cs-cream-dk);
    --bs-light-bg-subtle: var(--cs-warm-white);

    /* Subtle text (badge text on subtle bg) */
    --bs-primary-text-emphasis: #7a4d24;
    --bs-success-text-emphasis: #4a614d;
    --bs-danger-text-emphasis: #7a4a4a;
    --bs-warning-text-emphasis: #7a6024;
    --bs-info-text-emphasis: #3d5a6a;
    --bs-secondary-text-emphasis: #4a4540;

    /* Subtle borders */
    --bs-primary-border-subtle: #e8c8a6;
    --bs-success-border-subtle: #b8d4bb;
    --bs-danger-border-subtle: #e0b8b8;
    --bs-warning-border-subtle: #e8d6a6;
    --bs-info-border-subtle: #b3ced8;

    /* Links */
    --bs-link-color: var(--cs-amber);
    --bs-link-color-rgb: 212, 135, 63;
    --bs-link-hover-color: var(--cs-amber-hover);
    --bs-link-hover-color-rgb: 192, 117, 54;

    /* Focus ring */
    --bs-focus-ring-color: rgba(212, 135, 63, 0.25);

    /* Secondary color override */
    --bs-secondary-color: var(--cs-text-soft);
}


/* ═══════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════ */

body {
    font-family: var(--cs-sans);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--cs-serif);
    font-weight: 400;
    color: var(--cs-text);
}

.text-secondary {
    color: var(--cs-text-soft) !important;
}

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


/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cs-amber);
    --bs-btn-border-color: var(--cs-amber);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-amber-hover);
    --bs-btn-hover-border-color: var(--cs-amber-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-amber-active);
    --bs-btn-active-border-color: var(--cs-amber-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cs-amber);
    --bs-btn-disabled-border-color: var(--cs-amber);
    --bs-btn-focus-shadow-rgb: 212, 135, 63;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cs-sage);
    --bs-btn-border-color: var(--cs-sage);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-sage-hover);
    --bs-btn-hover-border-color: var(--cs-sage-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-sage-active);
    --bs-btn-active-border-color: var(--cs-sage-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cs-sage);
    --bs-btn-disabled-border-color: var(--cs-sage);
    --bs-btn-focus-shadow-rgb: 122, 155, 126;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cs-rose);
    --bs-btn-border-color: var(--cs-rose);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-rose-hover);
    --bs-btn-hover-border-color: var(--cs-rose-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-rose-active);
    --bs-btn-active-border-color: var(--cs-rose-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cs-rose);
    --bs-btn-disabled-border-color: var(--cs-rose);
    --bs-btn-focus-shadow-rgb: 196, 122, 122;
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cs-gold);
    --bs-btn-border-color: var(--cs-gold);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-gold-hover);
    --bs-btn-hover-border-color: var(--cs-gold-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-gold-active);
    --bs-btn-active-border-color: var(--cs-gold-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cs-gold);
    --bs-btn-disabled-border-color: var(--cs-gold);
    --bs-btn-focus-shadow-rgb: 212, 168, 67;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cs-steel);
    --bs-btn-border-color: var(--cs-steel);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-steel-hover);
    --bs-btn-hover-border-color: var(--cs-steel-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-steel-active);
    --bs-btn-active-border-color: var(--cs-steel-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cs-steel);
    --bs-btn-disabled-border-color: var(--cs-steel);
    --bs-btn-focus-shadow-rgb: 107, 148, 168;
}

/* Outline variants */
.btn-outline-primary {
    --bs-btn-color: var(--cs-amber);
    --bs-btn-border-color: var(--cs-amber);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-amber);
    --bs-btn-hover-border-color: var(--cs-amber);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-amber-active);
    --bs-btn-active-border-color: var(--cs-amber-active);
    --bs-btn-focus-shadow-rgb: 212, 135, 63;
}

.btn-outline-secondary {
    --bs-btn-color: var(--cs-text-soft);
    --bs-btn-border-color: var(--cs-border);
    --bs-btn-hover-color: var(--cs-text);
    --bs-btn-hover-bg: var(--cs-cream-dk);
    --bs-btn-hover-border-color: var(--cs-text-soft);
    --bs-btn-active-color: var(--cs-text);
    --bs-btn-active-bg: var(--cs-cream-dk);
    --bs-btn-active-border-color: var(--cs-text-soft);
    --bs-btn-focus-shadow-rgb: 107, 101, 96;
}

.btn-outline-success {
    --bs-btn-color: var(--cs-sage);
    --bs-btn-border-color: var(--cs-sage);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-sage);
    --bs-btn-hover-border-color: var(--cs-sage);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-sage-active);
    --bs-btn-active-border-color: var(--cs-sage-active);
    --bs-btn-focus-shadow-rgb: 122, 155, 126;
}

.btn-outline-danger {
    --bs-btn-color: var(--cs-rose);
    --bs-btn-border-color: var(--cs-rose);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-rose);
    --bs-btn-hover-border-color: var(--cs-rose);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-rose-active);
    --bs-btn-active-border-color: var(--cs-rose-active);
    --bs-btn-focus-shadow-rgb: 196, 122, 122;
}

/* Light button — on cream background, use warm-white */
.btn-light {
    --bs-btn-bg: var(--cs-warm-white);
    --bs-btn-border-color: var(--cs-border);
    --bs-btn-hover-bg: var(--cs-cream-dk);
    --bs-btn-hover-border-color: var(--cs-border);
    --bs-btn-active-bg: var(--cs-cream-dk);
    --bs-btn-active-border-color: var(--cs-border);
    --bs-btn-color: var(--cs-text);
}


/* ═══════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════ */

.form-control,
.form-select {
    --bs-border-color: var(--cs-border);
    background-color: var(--cs-warm-white);
    color: var(--cs-text);
    border-color: var(--cs-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cs-amber);
    box-shadow: 0 0 0 0.25rem rgba(212, 135, 63, 0.25);
    background-color: #fff;
}

.form-control::placeholder {
    color: var(--cs-text-muted);
}

.form-label {
    color: var(--cs-text);
    font-weight: 500;
}

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

.form-check-input:focus {
    border-color: var(--cs-amber);
    box-shadow: 0 0 0 0.25rem rgba(212, 135, 63, 0.25);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--cs-rose);
}

.invalid-feedback {
    color: var(--cs-rose);
}


/* ═══════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════ */

.card {
    --bs-card-bg: var(--cs-warm-white);
    --bs-card-border-color: var(--cs-border);
    --bs-card-cap-bg: var(--cs-warm-white);
    --bs-card-color: var(--cs-text);
}

.card-header {
    background-color: var(--cs-warm-white) !important;
    border-bottom-color: var(--cs-border);
}


/* ═══════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════ */

.navbar {
    --bs-navbar-color: var(--cs-text);
    --bs-navbar-hover-color: var(--cs-amber);
    --bs-navbar-active-color: var(--cs-amber);
}

.bg-white {
    background-color: var(--cs-warm-white) !important;
}

.bg-light {
    background-color: var(--cs-cream) !important;
}


/* ═══════════════════════════════════════════════════
   NAV / TABS
   ═══════════════════════════════════════════════════ */

.nav-link {
    color: var(--cs-text-soft);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--cs-amber);
}

.nav-link.active,
.nav-pills .nav-link.active {
    color: var(--cs-amber);
}

.nav-pills .nav-link.active {
    background-color: var(--cs-amber);
    color: #fff;
}

.nav-tabs .nav-link.active {
    color: var(--cs-amber);
    border-bottom-color: var(--cs-amber);
}


/* ═══════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════ */

.alert-primary {
    --bs-alert-bg: var(--cs-amber-lt);
    --bs-alert-color: #7a4d24;
    --bs-alert-border-color: #e8c8a6;
}

.alert-success {
    --bs-alert-bg: var(--cs-sage-lt);
    --bs-alert-color: #4a614d;
    --bs-alert-border-color: #b8d4bb;
}

.alert-danger {
    --bs-alert-bg: var(--cs-rose-lt);
    --bs-alert-color: #7a4a4a;
    --bs-alert-border-color: #e0b8b8;
}

.alert-warning {
    --bs-alert-bg: var(--cs-gold-lt);
    --bs-alert-color: #7a6024;
    --bs-alert-border-color: #e8d6a6;
}

.alert-info {
    --bs-alert-bg: var(--cs-steel-lt);
    --bs-alert-color: #3d5a6a;
    --bs-alert-border-color: #b3ced8;
}


/* ═══════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════ */

.badge.bg-primary {
    background-color: var(--cs-amber) !important;
}

.badge.bg-success {
    background-color: var(--cs-sage) !important;
}

.badge.bg-danger {
    background-color: var(--cs-rose) !important;
}

.badge.bg-warning {
    background-color: var(--cs-gold) !important;
    color: #fff !important;
}

.badge.bg-info {
    background-color: var(--cs-steel) !important;
    color: #fff !important;
}

.badge.bg-secondary {
    background-color: var(--cs-text-soft) !important;
}

.badge.bg-light {
    background-color: var(--cs-cream) !important;
    border-color: var(--cs-border) !important;
}

/* Subtle badges — text emphasis */
.badge.text-primary {
    color: #7a4d24 !important;
}

.badge.text-success {
    color: #4a614d !important;
}

.badge.text-danger {
    color: #7a4a4a !important;
}

.badge.text-warning {
    color: #7a6024 !important;
}

.badge.text-info {
    color: #3d5a6a !important;
}


/* ═══════════════════════════════════════════════════
   PROGRESS
   ═══════════════════════════════════════════════════ */

.progress {
    --bs-progress-bg: var(--cs-cream-dk);
}

.progress-bar {
    background-color: var(--cs-amber);
}

.progress-bar.bg-success {
    background-color: var(--cs-sage) !important;
}

.progress-bar.bg-info {
    background-color: var(--cs-steel) !important;
}

.progress-bar.bg-warning {
    background-color: var(--cs-gold) !important;
}

.progress-bar.bg-danger {
    background-color: var(--cs-rose) !important;
}


/* ═══════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cs-text);
    --bs-table-border-color: var(--cs-border);
    --bs-table-striped-bg: var(--cs-cream);
    --bs-table-hover-bg: var(--cs-cream-dk);
}


/* ═══════════════════════════════════════════════════
   DROPDOWNS / MODALS
   ═══════════════════════════════════════════════════ */

.dropdown-menu {
    --bs-dropdown-bg: var(--cs-warm-white);
    --bs-dropdown-border-color: var(--cs-border);
    --bs-dropdown-link-color: var(--cs-text);
    --bs-dropdown-link-hover-bg: var(--cs-cream);
    --bs-dropdown-link-active-bg: var(--cs-amber);
    --bs-dropdown-link-active-color: #fff;
}

.modal-content {
    --bs-modal-bg: var(--cs-warm-white);
    --bs-modal-border-color: var(--cs-border);
    --bs-modal-header-border-color: var(--cs-border);
    --bs-modal-footer-border-color: var(--cs-border);
}


/* ═══════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════ */

.page-link {
    color: var(--cs-amber);
    border-color: var(--cs-border);
    background-color: var(--cs-warm-white);
}

.page-link:hover {
    color: var(--cs-amber-hover);
    background-color: var(--cs-cream);
    border-color: var(--cs-border);
}

.page-item.active .page-link {
    background-color: var(--cs-amber);
    border-color: var(--cs-amber);
    color: #fff;
}

.page-item.disabled .page-link {
    color: var(--cs-text-muted);
    background-color: var(--cs-cream);
    border-color: var(--cs-border);
}


/* ═══════════════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════════════ */

.spinner-border {
    color: var(--cs-amber);
}

.spinner-border.text-primary {
    color: var(--cs-amber) !important;
}

.spinner-border.text-success {
    color: var(--cs-sage) !important;
}


/* ═══════════════════════════════════════════════════
   MISC UTILITIES
   ═══════════════════════════════════════════════════ */

/* Border colors when used explicitly */
.border-primary {
    border-color: var(--cs-amber) !important;
}

.border-success {
    border-color: var(--cs-sage) !important;
}

.border-danger {
    border-color: var(--cs-rose) !important;
}

.border-warning {
    border-color: var(--cs-gold) !important;
}

.border-info {
    border-color: var(--cs-steel) !important;
}

/* Text colors */
.text-primary {
    color: var(--cs-amber) !important;
}

.text-success {
    color: var(--cs-sage) !important;
}

.text-danger {
    color: var(--cs-rose) !important;
}

.text-warning {
    color: var(--cs-gold) !important;
}

.text-info {
    color: var(--cs-steel) !important;
}

/* Subtle border helpers used on plan cards */
.border-primary-subtle {
    border-color: #e8c8a6 !important;
}

.border-success-subtle {
    border-color: #b8d4bb !important;
}

.border-danger-subtle {
    border-color: #e0b8b8 !important;
}

.border-warning-subtle {
    border-color: #e8d6a6 !important;
}

.border-info-subtle {
    border-color: #b3ced8 !important;
}

/* Background text color combos */
.bg-primary {
    background-color: var(--cs-amber) !important;
}

.bg-success {
    background-color: var(--cs-sage) !important;
}

.bg-danger {
    background-color: var(--cs-rose) !important;
}

.bg-warning {
    background-color: var(--cs-gold) !important;
}

.bg-info {
    background-color: var(--cs-steel) !important;
}

.bg-secondary {
    background-color: var(--cs-text-soft) !important;
}

/* Subtle background utilities */
.bg-primary-subtle {
    background-color: var(--cs-amber-lt) !important;
}

.bg-success-subtle {
    background-color: var(--cs-sage-lt) !important;
}

.bg-danger-subtle {
    background-color: var(--cs-rose-lt) !important;
}

.bg-warning-subtle {
    background-color: var(--cs-gold-lt) !important;
}

.bg-info-subtle {
    background-color: var(--cs-steel-lt) !important;
}

.bg-secondary-subtle {
    background-color: var(--cs-cream-dk) !important;
}


/* ═══════════════════════════════════════════════════
   SHADOW WARMTH
   ═══════════════════════════════════════════════════ */

.shadow-sm {
    box-shadow: 0 1px 3px rgba(45, 42, 38, 0.06) !important;
}

.shadow {
    box-shadow: 0 2px 8px rgba(45, 42, 38, 0.08), 0 1px 2px rgba(45, 42, 38, 0.04) !important;
}

.shadow-lg {
    box-shadow: 0 8px 32px rgba(45, 42, 38, 0.10), 0 2px 6px rgba(45, 42, 38, 0.04) !important;
}


/* ═══════════════════════════════════════════════════
   SCROLLBAR (subtle, warm)
   ═══════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--cs-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--cs-cream-dk);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cs-text-muted);
}