/* ===== FAMS color themes =====
   Every green/teal surface (header and sidebar backgrounds, buttons, links, KPI cards, login)
   reads these variables. Pick a theme with <html data-theme="...">; the
   value comes from System Settings > General > Color theme.
   To add a theme: copy a block below, change the values, and add it to
   the 'theme' choices in includes/settings.php. */

/* Green — the original FAMS look (saved as the default). */
:root, :root[data-theme="green"] {
    --oms-side-bg: #083f3b;
    --oms-nav-bg: #0a5750;
    --oms-nav-mid: #0d6a63;
    --oms-accent: #14968c;
    --oms-accent-light: #5fd0c4;
    --oms-teal: #0f7a72;
    --oms-teal-dark: #0b5f59;
    --oms-teal-light: #5cb3ac;
    --oms-cream: #eaf6f4;
    --oms-tint: #e6f4f2;
    --oms-ink: #183b3b;
    --oms-ink-soft: #24312f;
    --oms-teal-rgb: 15, 122, 114;
    --oms-teal-dark-rgb: 11, 95, 89;
    --oms-ink-rgb: 24, 59, 59;
}

/* Red — GOC-style crimson. */
:root[data-theme="red"] {
    --oms-side-bg: #4a0f14;
    --oms-nav-bg: #7a1219;
    --oms-nav-mid: #8f1a22;
    --oms-accent: #d92b36;
    --oms-accent-light: #f4a3a8;
    --oms-teal: #b3202a;
    --oms-teal-dark: #8a1820;
    --oms-teal-light: #e08a90;
    --oms-cream: #fbeced;
    --oms-tint: #f9e6e7;
    --oms-ink: #3b1a1d;
    --oms-ink-soft: #2f2224;
    --oms-teal-rgb: 179, 32, 42;
    --oms-teal-dark-rgb: 138, 24, 32;
    --oms-ink-rgb: 59, 26, 29;
}

/* Blue — a calmer, corporate blue. */
:root[data-theme="blue"] {
    --oms-side-bg: #0f2a4a;
    --oms-nav-bg: #14335c;
    --oms-nav-mid: #1a4274;
    --oms-accent: #2f6fc0;
    --oms-accent-light: #9cc3f0;
    --oms-teal: #1f4e8c;
    --oms-teal-dark: #163a69;
    --oms-teal-light: #7fa3d1;
    --oms-cream: #eaf1fa;
    --oms-tint: #e6eef8;
    --oms-ink: #182c47;
    --oms-ink-soft: #1f2a38;
    --oms-teal-rgb: 31, 78, 140;
    --oms-teal-dark-rgb: 22, 58, 105;
    --oms-ink-rgb: 24, 44, 71;
}

/* Purple */
:root[data-theme="purple"] {
    --oms-side-bg: #2b1245;
    --oms-nav-bg: #3d1a62;
    --oms-nav-mid: #4b2078;
    --oms-accent: #8e4fd1;
    --oms-accent-light: #d3b3f2;
    --oms-teal: #6a3aa8;
    --oms-teal-dark: #512b82;
    --oms-teal-light: #b394dd;
    --oms-cream: #f2ecfa;
    --oms-tint: #eee5f8;
    --oms-ink: #2a1a3f;
    --oms-ink-soft: #2b2433;
    --oms-teal-rgb: 106, 58, 168;
    --oms-teal-dark-rgb: 81, 43, 130;
    --oms-ink-rgb: 42, 26, 63;
}

/* Orange */
:root[data-theme="orange"] {
    --oms-side-bg: #4a2108;
    --oms-nav-bg: #7a3510;
    --oms-nav-mid: #923f12;
    --oms-accent: #f0801f;
    --oms-accent-light: #fbc58f;
    --oms-teal: #d2691e;
    --oms-teal-dark: #a74f12;
    --oms-teal-light: #eba56e;
    --oms-cream: #fdf1e6;
    --oms-tint: #fbebdc;
    --oms-ink: #43260f;
    --oms-ink-soft: #34291f;
    --oms-teal-rgb: 210, 105, 30;
    --oms-teal-dark-rgb: 167, 79, 18;
    --oms-ink-rgb: 67, 38, 15;
}

/* Slate */
:root[data-theme="slate"] {
    --oms-side-bg: #1e2733;
    --oms-nav-bg: #2b3645;
    --oms-nav-mid: #35435a;
    --oms-accent: #5b7390;
    --oms-accent-light: #aebdd0;
    --oms-teal: #43556d;
    --oms-teal-dark: #33425a;
    --oms-teal-light: #8ea0b8;
    --oms-cream: #edf1f6;
    --oms-tint: #e8edf3;
    --oms-ink: #202c3b;
    --oms-ink-soft: #252c35;
    --oms-teal-rgb: 67, 85, 109;
    --oms-teal-dark-rgb: 51, 66, 90;
    --oms-ink-rgb: 32, 44, 59;
}

/* Indigo */
:root[data-theme="indigo"] {
    --oms-side-bg: #1a1d4d;
    --oms-nav-bg: #262a70;
    --oms-nav-mid: #2f3585;
    --oms-accent: #5561d8;
    --oms-accent-light: #aab1f2;
    --oms-teal: #3f4bb8;
    --oms-teal-dark: #2f3a92;
    --oms-teal-light: #8f98e0;
    --oms-cream: #eceefb;
    --oms-tint: #e6e9f9;
    --oms-ink: #1d2046;
    --oms-ink-soft: #25273a;
    --oms-teal-rgb: 63, 75, 184;
    --oms-teal-dark-rgb: 47, 58, 146;
    --oms-ink-rgb: 29, 32, 70;
}

/* Rose */
:root[data-theme="rose"] {
    --oms-side-bg: #4d1230;
    --oms-nav-bg: #7a1d4a;
    --oms-nav-mid: #8f2557;
    --oms-accent: #e0457f;
    --oms-accent-light: #f5a8c6;
    --oms-teal: #c2255c;
    --oms-teal-dark: #9a1b49;
    --oms-teal-light: #e787ab;
    --oms-cream: #fcecf2;
    --oms-tint: #fae4ed;
    --oms-ink: #431628;
    --oms-ink-soft: #34242b;
    --oms-teal-rgb: 194, 37, 92;
    --oms-teal-dark-rgb: 154, 27, 73;
    --oms-ink-rgb: 67, 22, 40;
}

/* Buttons and focus highlights follow the active theme. */
.btn-primary { --bs-btn-bg: var(--oms-teal); --bs-btn-border-color: var(--oms-teal); --bs-btn-hover-bg: var(--oms-teal-dark); --bs-btn-hover-border-color: var(--oms-teal-dark); --bs-btn-active-bg: var(--oms-teal-dark); --bs-btn-active-border-color: var(--oms-teal-dark); --bs-btn-disabled-bg: var(--oms-teal); --bs-btn-disabled-border-color: var(--oms-teal); --bs-btn-focus-shadow-rgb: var(--oms-teal-rgb); }
.btn-outline-primary { --bs-btn-color: var(--oms-teal); --bs-btn-border-color: var(--oms-teal); --bs-btn-hover-bg: var(--oms-teal); --bs-btn-hover-border-color: var(--oms-teal); --bs-btn-active-bg: var(--oms-teal-dark); --bs-btn-active-border-color: var(--oms-teal-dark); --bs-btn-focus-shadow-rgb: var(--oms-teal-rgb); }
.bank-primary:focus-visible, .btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--oms-teal-rgb), .3); outline: 0; }
.form-control:focus, .form-select:focus { border-color: var(--oms-teal-light); box-shadow: 0 0 0 .2rem rgba(var(--oms-teal-rgb), .2); }