/*
 * Theme: warm paper tones, one clay accent, soft corners, hairline borders and serif headings, laid over Bootstrap 5.3.
 * Bootstrap's own files are untouched; everything here is loaded after them and before styles.css.
 * To switch the look off, remove the theme.css link in app/partials/head.php.
 */

:root,
[data-bs-theme="light"] {
    --app-clay: #bf6f55;
    --app-clay-hover: #ad6049;
    --app-clay-active: #9a5540;
    --app-clay-rgb: 191, 111, 85;
    --app-surface: #ffffff;
    --app-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

    --bs-body-bg: #faf9f5;
    --bs-body-bg-rgb: 250, 249, 245;
    --bs-body-color: #1f1e1d;
    --bs-body-color-rgb: 31, 30, 29;
    --bs-secondary-color: rgba(31, 30, 29, 0.62);
    --bs-secondary-bg: #f0eee6;
    --bs-secondary-bg-rgb: 240, 238, 230;
    --bs-tertiary-color: rgba(31, 30, 29, 0.5);
    --bs-tertiary-bg: #f5f4ed;
    --bs-tertiary-bg-rgb: 245, 244, 237;
    --bs-emphasis-color: #141413;
    --bs-border-color: #e6e3d8;
    --bs-border-color-translucent: rgba(31, 30, 29, 0.1);

    --app-badge-danger-bg: #f3d9d3;   --app-badge-danger-fg: #8c2f1f;
    --app-badge-warning-bg: #f3e6c4;  --app-badge-warning-fg: #7a5a10;
    --app-badge-success-bg: #dbe8d3;  --app-badge-success-fg: #3a6228;
    --app-badge-info-bg: #dde8ee;     --app-badge-info-fg: #2d4f63;
    --app-badge-neutral-bg: #ebe8dd;  --app-badge-neutral-fg: #5a5850;
}

[data-bs-theme="dark"] {
    --app-clay: #cf8167;
    --app-clay-hover: #d99277;
    --app-clay-active: #e2a28a;
    --app-clay-rgb: 207, 129, 103;
    --app-surface: #30302e;

    --bs-body-bg: #262624;
    --bs-body-bg-rgb: 38, 38, 36;
    --bs-body-color: #ece9df;
    --bs-body-color-rgb: 236, 233, 223;
    --bs-secondary-color: rgba(236, 233, 223, 0.62);
    --bs-secondary-bg: #30302e;
    --bs-secondary-bg-rgb: 48, 48, 46;
    --bs-tertiary-color: rgba(236, 233, 223, 0.48);
    --bs-tertiary-bg: #2c2c2a;
    --bs-tertiary-bg-rgb: 44, 44, 42;
    --bs-emphasis-color: #faf9f5;
    --bs-border-color: #3d3d3a;
    --bs-border-color-translucent: rgba(236, 233, 223, 0.1);

    --app-badge-danger-bg: #4a2a25;   --app-badge-danger-fg: #f0a898;
    --app-badge-warning-bg: #4a3e1d;  --app-badge-warning-fg: #e6c875;
    --app-badge-success-bg: #2f3f29;  --app-badge-success-fg: #a9cf95;
    --app-badge-info-bg: #2f4350;     --app-badge-info-fg: #a9c7d9;
    --app-badge-neutral-bg: #3a3a37;  --app-badge-neutral-fg: #b9b6aa;
}

:root {
    --bs-primary: var(--app-clay);
    --bs-primary-rgb: var(--app-clay-rgb);
    --bs-link-color: var(--app-clay);
    --bs-link-color-rgb: var(--app-clay-rgb);
    --bs-link-hover-color: var(--app-clay-hover);
    --bs-link-hover-color-rgb: var(--app-clay-rgb);
    --bs-focus-ring-color: rgba(var(--app-clay-rgb), 0.25);

    --bs-border-radius: 0.6rem;
    --bs-border-radius-sm: 0.45rem;
    --bs-border-radius-lg: 0.9rem;
    --bs-border-radius-xl: 1.2rem;
    --bs-border-radius-xxl: 1.6rem;

    --bs-box-shadow: 0 1px 2px rgba(20, 20, 19, 0.05);
    --bs-box-shadow-sm: 0 1px 1px rgba(20, 20, 19, 0.04);
    --bs-box-shadow-lg: 0 8px 24px rgba(20, 20, 19, 0.12);
    --bs-body-line-height: 1.55;
}

[data-bs-theme="light"] {
    --bs-primary-text-emphasis: #7d3b25;
    --bs-primary-bg-subtle: #f6e3db;
    --bs-primary-border-subtle: #ebc3b3;
}

[data-bs-theme="dark"] {
    --bs-primary-text-emphasis: #ecaa90;
    --bs-primary-bg-subtle: #3d2a23;
    --bs-primary-border-subtle: #6a4132;
}

/* headings and titles in a serif; everything else stays in the system sans */
h1, h2, h3, .h1, .h2, .h3,
.navbar-brand,
.modal-title,
.msg-subject,
.empty-title {
    font-family: var(--app-serif);
    font-weight: 500;
    letter-spacing: -0.005em;
}

/* surfaces: white (light) or a lifted grey (dark) on the paper background */
.card,
.modal-content,
.dropdown-menu,
.popover,
.list-group {
    --bs-card-bg: var(--app-surface);
    --bs-modal-bg: var(--app-surface);
    --bs-dropdown-bg: var(--app-surface);
    --bs-popover-bg: var(--app-surface);
    --bs-card-border-color: var(--bs-border-color);
    --bs-modal-border-color: var(--bs-border-color);
    --bs-dropdown-border-color: var(--bs-border-color);
}

.card {
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: calc(1rem - 1px);
    box-shadow: none;
}

.modal-content {
    --bs-modal-border-radius: 1.1rem;
    box-shadow: var(--bs-box-shadow-lg);
}

.form-control,
.form-select {
    background-color: var(--app-surface);
    border-color: var(--bs-border-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-clay);
    box-shadow: 0 0 0 0.2rem rgba(var(--app-clay-rgb), 0.2);
}

.input-group-text {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

/* the clay accent on Bootstrap's blue parts */
.btn-primary {
    --bs-btn-bg: var(--app-clay);
    --bs-btn-border-color: var(--app-clay);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--app-clay-hover);
    --bs-btn-hover-border-color: var(--app-clay-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--app-clay-active);
    --bs-btn-active-border-color: var(--app-clay-active);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--app-clay);
    --bs-btn-disabled-border-color: var(--app-clay);
    --bs-btn-disabled-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--app-clay-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-clay);
    --bs-btn-border-color: var(--app-clay);
    --bs-btn-hover-bg: var(--app-clay);
    --bs-btn-hover-border-color: var(--app-clay);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--app-clay-hover);
    --bs-btn-active-border-color: var(--app-clay-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--app-clay);
    --bs-btn-disabled-border-color: var(--app-clay);
    --bs-btn-focus-shadow-rgb: var(--app-clay-rgb);
}

.btn-link {
    --bs-btn-color: var(--app-clay);
    --bs-btn-hover-color: var(--app-clay-hover);
    --bs-btn-active-color: var(--app-clay-active);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-body-color);
}

.text-bg-primary,
.bg-primary {
    background-color: var(--app-clay) !important;
    color: #fff !important;
}

.text-primary {
    color: var(--app-clay) !important;
}

.border-primary {
    border-color: var(--app-clay) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--app-clay);
    --bs-nav-pills-link-active-color: #fff;
}

.nav-pills .nav-link {
    border-radius: var(--bs-border-radius);
}

.list-group {
    --bs-list-group-active-bg: var(--app-clay);
    --bs-list-group-active-border-color: var(--app-clay);
    --bs-list-group-border-color: var(--bs-border-color);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--app-clay);
    --bs-dropdown-border-radius: 0.8rem;
    --bs-dropdown-box-shadow: var(--bs-box-shadow-lg);
}

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

.form-check-input:focus {
    border-color: var(--app-clay);
    box-shadow: 0 0 0 0.2rem rgba(var(--app-clay-rgb), 0.2);
}

.form-switch .form-check-input:checked {
    background-color: var(--app-clay);
}

.progress {
    --bs-progress-bar-bg: var(--app-clay);
}

.page-link {
    --bs-pagination-color: var(--app-clay);
    --bs-pagination-active-bg: var(--app-clay);
    --bs-pagination-active-border-color: var(--app-clay);
}

:focus-visible {
    outline-color: var(--app-clay);
}

/* quieter chrome: hairline separators, no heavy shadows */
.navbar,
.app-topbar {
    --bs-navbar-brand-font-size: 1.15rem;
    border-color: var(--bs-border-color) !important;
}

.border,
.border-bottom,
.border-top,
.border-end,
.border-start {
    border-color: var(--bs-border-color) !important;
}

hr {
    border-color: var(--bs-border-color);
    opacity: 1;
}

.badge {
    font-weight: 500;
}

/* section labels such as "Preferences" or "Mailbox": small, quiet, spaced */
.inbox-nav-title {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* status badges: soft tinted backgrounds instead of solid primary colours */
.badge.text-bg-danger    { background-color: var(--app-badge-danger-bg) !important;  color: var(--app-badge-danger-fg) !important; }
.badge.text-bg-warning   { background-color: var(--app-badge-warning-bg) !important; color: var(--app-badge-warning-fg) !important; }
.badge.text-bg-success   { background-color: var(--app-badge-success-bg) !important; color: var(--app-badge-success-fg) !important; }
.badge.text-bg-info      { background-color: var(--app-badge-info-bg) !important;    color: var(--app-badge-info-fg) !important; }
.badge.text-bg-secondary,
.badge.text-bg-dark,
.badge.text-bg-light     { background-color: var(--app-badge-neutral-bg) !important; color: var(--app-badge-neutral-fg) !important; }
.badge.text-bg-primary   { background-color: rgba(var(--app-clay-rgb), 0.16) !important; color: var(--app-clay) !important; }
.badge.text-bg-dark.border { border-color: var(--bs-border-color) !important; }

/* the icon font is thin by default: a hair of outline makes every icon a little bolder and easier to see */
.bi::before {
    -webkit-text-stroke: 0.45px currentColor;
}

/* Bootstrap's own "active" list rows are a calm tint too, never a solid block of colour */
.list-group-item.active {
    background-color: rgba(var(--app-clay-rgb), 0.1);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    box-shadow: inset 3px 0 0 var(--app-clay);
}

/* Font trial: Arial for all text, headings and big numbers included. Delete this block to go back to the system font with serif headings. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --app-serif: Arial, "Helvetica Neue", Helvetica, sans-serif;
}