/* Centralized theme variables for JIT Platform
   This file defines default CSS variables for theming.
   The inline <style> in templates/default/layout.php will override these
   variables with values from the DB when available.
*/
:root {
    --brand-primary: #800000;
    --brand-50: #fff5f5;
    --brand-100: #ffe5e5;
    --brand-200: #ffc7c7;
    --brand-300: #ff9a9a;
    --brand-400: #ff6d6d;
    --brand-500: #e64b4b;
    --brand-600: #993232;
    --brand-700: #802222;
    --brand-800: #660000;
    --brand-900: #3d0000;
    --brand-primary-dark: var(--brand-800);
    --brand-secondary: #4a4a4a;
    --brand-accent-orange: #ff6200;
    --brand-accent-blue: #005f87;
    --brand-light: #f5f5f5;
    --brand-dark: #2a2a2a;
    --text-color: #2a2a2a;
    --muted-color: #666666;
}

/* Small helpers that reference the variables */
.btn-primary {
    background: linear-gradient(180deg, var(--brand-600, var(--brand-primary)), var(--brand-800));
    color: #fff;
}

.text-primary {
    color: var(--brand-primary);
}

.bg-primary {
    background: var(--brand-primary);
}

.border-primary {
    border-color: var(--brand-primary);
}

/* Global elemental rules to enforce monochromatic maroon look */
a { color: var(--brand-700); }
a:hover { color: var(--brand-900); }
h1, h2, h3, h4, h5 { color: var(--text-color); }
/* Buttons */
.btn-primary { border-color: rgba(0,0,0,0.08); }
.badge-maroon, .badge-primary { background: rgba(128,0,0,0.06); color: var(--brand-primary); border-color: rgba(128,0,0,0.12); }

/* form focus */
.form-control:focus { box-shadow: 0 0 0 3px rgba(128,0,0,0.08); border-color: var(--brand-700); }

/* Utility to tint backgrounds */
.bg-brand-100 { background: var(--brand-100); }
.bg-brand-200 { background: var(--brand-200); }