/* theme.css - DanLoi shared theme color pattern (F8a). The ONLY file that declares colors.
   Roles: see docs/designs/theme-color-pattern.md. Never add a color elsewhere; add a role here. */

/* 1. Light roles (default) */
:root {
    /* surfaces: used only as a background */
    --color-page: #F3EEE0;
    --color-page-alt: #EAE1CB;
    --color-surface: #FFFFFF;
    --color-accent-subtle: #E2EFE1;
    --color-gold-subtle: #F3E6CC;
    --color-inverse: #2E4A37;
    --color-inverse-raised: #3B5C45;
    --color-primary: #3F7352;
    --color-primary-hover: #2E4A37;
    --color-gold-fill: #7E561C;
    --color-gold-fill-hover: #6A4816;
    --color-danger-fill: #A5281B;
    --color-success-bg: #E2EFE1;
    --color-danger-bg: #F8E1DC;
    --color-warning-bg: #F6E8C8;
    --color-info-bg: #DFEBF1;
    --color-scrim: rgba(20, 26, 21, .50);
    /* text: used only as a foreground */
    --color-text: #232620;
    --color-text-muted: #5B5E54;
    --color-accent-text: #2E4A37;
    --color-accent-text-hover: #1E3326;
    --color-eyebrow: #386A4A;
    --color-gold-text: #7E561C;
    --color-on-primary: #FFFFFF;
    --color-on-gold: #FFFFFF;
    --color-on-danger: #FFFFFF;
    --color-on-inverse: #F3EEE0;
    --color-on-inverse-muted: #C7D6CC;
    --color-on-inverse-accent: #EBC48E;
    --color-success-text: #2E6B40;
    --color-danger-text: #A5281B;
    --color-warning-text: #7A5212;
    --color-info-text: #2B5873;
    /* non-text UI: borders, focus rings, icons, dividers */
    --color-input-border: #7A7C72;
    --color-focus-ring: #3F7352;
    --color-focus-ring-on-inverse: #EBC48E;
    --color-icon: #4E8763;
    --color-line: rgba(35, 38, 32, .14);
    --color-inverse-line: rgba(243, 238, 224, .16);
    /* no backing in light: the logo artwork is unchanged */
    --color-logo-backing: transparent;
    /* theme-varying tokens, so component CSS never branches by theme */
    --logo-backing-padding: 0;
    --logo-backing-radius: 0;
    --shadow-raised: 0 1px 3px rgba(35, 38, 32, .10);
    /* Bootstrap close button is already a dark glyph in light */
    --filter-btn-close: none;
    /* Bootstrap 5.3.3 select chevron, dark stroke */
    --asset-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    /* RGB triplets for Bootstrap rgba(var(--bs-*-rgb), alpha) utilities */
    --color-text-rgb: 35, 38, 32;
    --color-page-rgb: 243, 238, 224;
    --color-accent-text-rgb: 46, 74, 55;
    --color-accent-text-hover-rgb: 30, 51, 38;
    --color-danger-text-rgb: 165, 40, 27;
    --color-success-text-rgb: 46, 107, 64;
    color-scheme: light;
}

/* 2. Dark roles: OS dark, unless the user explicitly chose light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-page: #1E221D;
        --color-page-alt: #262B25;
        --color-surface: #2A3029;
        --color-accent-subtle: #2C3F30;
        --color-gold-subtle: #3A3020;
        --color-inverse: #2F4935;
        --color-inverse-raised: #3A5A42;
        --color-primary: #8CC79F;
        --color-primary-hover: #A6D6B5;
        --color-gold-fill: #E0B273;
        --color-gold-fill-hover: #EBC48E;
        --color-danger-fill: #F2A193;
        --color-success-bg: #203A27;
        --color-danger-bg: #3D201B;
        --color-warning-bg: #3A2F17;
        --color-info-bg: #1C3140;
        --color-scrim: rgba(0, 0, 0, .60);
        --color-text: #EDE9DC;
        --color-text-muted: #C4C3B6;
        --color-accent-text: #8CC79F;
        --color-accent-text-hover: #A9DBB8;
        --color-eyebrow: #8CC79F;
        --color-gold-text: #E0B273;
        --color-on-primary: #14201A;
        --color-on-gold: #14201A;
        --color-on-danger: #14201A;
        --color-on-inverse: #EDE9DC;
        --color-on-inverse-muted: #BFCDC3;
        --color-on-inverse-accent: #EBC48E;
        --color-success-text: #8CC79F;
        --color-danger-text: #F2A193;
        --color-warning-text: #E8C27A;
        --color-info-text: #93C3DE;
        --color-input-border: #848B7F;
        --color-focus-ring: #8CC79F;
        --color-focus-ring-on-inverse: #EBC48E;
        --color-icon: #7DB98F;
        --color-line: rgba(237, 233, 220, .18);
        --color-inverse-line: rgba(237, 233, 220, .16);
        /* cream disc so the dark-on-transparent logo stays visible on dark */
        --color-logo-backing: #F3EEE0;
        --logo-backing-padding: 3px;
        --logo-backing-radius: 50%;
        --shadow-raised: 0 1px 3px rgba(0, 0, 0, .40);
        /* Bootstrap close button is a dark glyph; invert it on dark */
        --filter-btn-close: invert(1) grayscale(100%) brightness(200%);
        /* Bootstrap select chevron redrawn with a light stroke */
        --asset-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23EDE9DC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        --color-text-rgb: 237, 233, 220;
        --color-page-rgb: 30, 34, 29;
        --color-accent-text-rgb: 140, 199, 159;
        --color-accent-text-hover-rgb: 169, 219, 184;
        --color-danger-text-rgb: 242, 161, 147;
        --color-success-text-rgb: 140, 199, 159;
        color-scheme: dark;
    }
}

/* 3. Dark roles: explicit dark choice. MUST be identical to block 2 (enforced by a test). */
:root[data-theme="dark"] {
    --color-page: #1E221D;
    --color-page-alt: #262B25;
    --color-surface: #2A3029;
    --color-accent-subtle: #2C3F30;
    --color-gold-subtle: #3A3020;
    --color-inverse: #2F4935;
    --color-inverse-raised: #3A5A42;
    --color-primary: #8CC79F;
    --color-primary-hover: #A6D6B5;
    --color-gold-fill: #E0B273;
    --color-gold-fill-hover: #EBC48E;
    --color-danger-fill: #F2A193;
    --color-success-bg: #203A27;
    --color-danger-bg: #3D201B;
    --color-warning-bg: #3A2F17;
    --color-info-bg: #1C3140;
    --color-scrim: rgba(0, 0, 0, .60);
    --color-text: #EDE9DC;
    --color-text-muted: #C4C3B6;
    --color-accent-text: #8CC79F;
    --color-accent-text-hover: #A9DBB8;
    --color-eyebrow: #8CC79F;
    --color-gold-text: #E0B273;
    --color-on-primary: #14201A;
    --color-on-gold: #14201A;
    --color-on-danger: #14201A;
    --color-on-inverse: #EDE9DC;
    --color-on-inverse-muted: #BFCDC3;
    --color-on-inverse-accent: #EBC48E;
    --color-success-text: #8CC79F;
    --color-danger-text: #F2A193;
    --color-warning-text: #E8C27A;
    --color-info-text: #93C3DE;
    --color-input-border: #848B7F;
    --color-focus-ring: #8CC79F;
    --color-focus-ring-on-inverse: #EBC48E;
    --color-icon: #7DB98F;
    --color-line: rgba(237, 233, 220, .18);
    --color-inverse-line: rgba(237, 233, 220, .16);
    /* cream disc so the dark-on-transparent logo stays visible on dark */
    --color-logo-backing: #F3EEE0;
    --logo-backing-padding: 3px;
    --logo-backing-radius: 50%;
    --shadow-raised: 0 1px 3px rgba(0, 0, 0, .40);
    /* Bootstrap close button is a dark glyph; invert it on dark */
    --filter-btn-close: invert(1) grayscale(100%) brightness(200%);
    /* Bootstrap select chevron redrawn with a light stroke */
    --asset-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23EDE9DC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --color-text-rgb: 237, 233, 220;
    --color-page-rgb: 30, 34, 29;
    --color-accent-text-rgb: 140, 199, 159;
    --color-accent-text-hover-rgb: 169, 219, 184;
    --color-danger-text-rgb: 242, 161, 147;
    --color-success-text-rgb: 140, 199, 159;
    color-scheme: dark;
}

/* 4. Photo scrims: the same in both themes (a photo is not themed; documented exception) */
:root {
    --color-photo-scrim-strong: rgba(22, 38, 27, .92);
    --color-photo-scrim-weak: rgba(22, 38, 27, .72);
    /* under the testimonial caption and attribution: >= .80 keeps both on-inverse and the gold accent at 4.5:1 over white */
    --color-photo-scrim-text: rgba(22, 38, 27, .80);
    /* legibility shadow for text over a photo: the same in both themes */
    --shadow-text-on-photo: 0 1px 2px rgba(0, 0, 0, .45);
}

/* 5. Bootstrap bridge: root variables (Bootstrap 5.3.3 re-pointed at the roles) */
:root {
    --bs-body-bg: var(--color-page);
    --bs-body-bg-rgb: var(--color-page-rgb);
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: var(--color-text-rgb);
    --bs-emphasis-color: var(--color-text);
    --bs-emphasis-color-rgb: var(--color-text-rgb);
    --bs-secondary-color: var(--color-text-muted);
    --bs-secondary-bg: var(--color-page-alt);
    --bs-tertiary-bg: var(--color-page-alt);
    --bs-border-color: var(--color-line);
    --bs-border-color-translucent: var(--color-line);
    --bs-heading-color: inherit;
    --bs-link-color: var(--color-accent-text);
    --bs-link-color-rgb: var(--color-accent-text-rgb);
    --bs-link-hover-color: var(--color-accent-text-hover);
    --bs-link-hover-color-rgb: var(--color-accent-text-hover-rgb);
    --bs-danger-rgb: var(--color-danger-text-rgb);
    --bs-success-rgb: var(--color-success-text-rgb);
    --bs-form-valid-color: var(--color-success-text);
    --bs-form-valid-border-color: var(--color-success-text);
    --bs-form-invalid-color: var(--color-danger-text);
    --bs-form-invalid-border-color: var(--color-danger-text);
    --bs-focus-ring-color: var(--color-focus-ring);
    --bs-success-text-emphasis: var(--color-success-text);
    --bs-success-bg-subtle: var(--color-success-bg);
    --bs-success-border-subtle: var(--color-success-bg);
    --bs-danger-text-emphasis: var(--color-danger-text);
    --bs-danger-bg-subtle: var(--color-danger-bg);
    --bs-danger-border-subtle: var(--color-danger-bg);
    --bs-warning-text-emphasis: var(--color-warning-text);
    --bs-warning-bg-subtle: var(--color-warning-bg);
    --bs-warning-border-subtle: var(--color-warning-bg);
    --bs-info-text-emphasis: var(--color-info-text);
    --bs-info-bg-subtle: var(--color-info-bg);
    --bs-info-border-subtle: var(--color-info-bg);
}

/* 5b. Bootstrap bridge: form controls */
.form-control,
.form-select {
    background-color: var(--color-surface);
    border-color: var(--color-input-border);
    color: var(--color-text);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--color-surface);
    border-color: var(--color-focus-ring);
    color: var(--color-text);
    box-shadow: none; /* the shared :focus-visible outline below is the focus indicator */
}
.form-select { --bs-form-select-bg-img: var(--asset-select-arrow); }
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--color-page-alt);
    color: var(--color-text-muted);
}

/* 5c. Bootstrap bridge: dropdown, modal, close button, table */
.dropdown-menu {
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-color: var(--color-text);
    --bs-dropdown-border-color: var(--color-line);
    --bs-dropdown-divider-bg: var(--color-line);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-accent-text);
    --bs-dropdown-link-hover-bg: var(--color-accent-subtle);
    --bs-dropdown-link-active-color: var(--color-on-primary);
    --bs-dropdown-link-active-bg: var(--color-primary);
}
.modal {
    --bs-modal-bg: var(--color-surface);
    --bs-modal-color: var(--color-text);
    --bs-modal-border-color: var(--color-line);
    --bs-modal-header-border-color: var(--color-line);
    --bs-modal-footer-border-color: var(--color-line);
}
.btn-close { filter: var(--filter-btn-close); }
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-line);
    --bs-table-striped-bg: var(--color-page-alt);
    --bs-table-striped-color: var(--color-text);
    --bs-table-hover-bg: var(--color-accent-subtle);
    --bs-table-hover-color: var(--color-text);
}
.table-warning {
    --bs-table-bg: var(--color-warning-bg);
    --bs-table-color: var(--color-warning-text);
    --bs-table-striped-bg: var(--color-warning-bg);
    --bs-table-striped-color: var(--color-warning-text);
    --bs-table-hover-bg: var(--color-warning-bg);
    --bs-table-hover-color: var(--color-warning-text);
    --bs-table-border-color: var(--color-line);
}

/* 5d. Bootstrap bridge: buttons */
.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-color: var(--color-on-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: var(--color-text-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--color-accent-text);
    --bs-btn-border-color: var(--color-accent-text);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-color: var(--color-accent-text);
    --bs-btn-disabled-border-color: var(--color-accent-text);
}
.btn-outline-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-input-border);
    --bs-btn-hover-bg: var(--color-accent-subtle);
    --bs-btn-hover-color: var(--color-accent-text);
    --bs-btn-hover-border-color: var(--color-input-border);
    --bs-btn-active-bg: var(--color-accent-subtle);
    --bs-btn-active-color: var(--color-accent-text);
    --bs-btn-active-border-color: var(--color-input-border);
    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-border-color: var(--color-input-border);
}
.btn-danger {
    --bs-btn-bg: var(--color-danger-fill);
    --bs-btn-color: var(--color-on-danger);
    --bs-btn-border-color: var(--color-danger-fill);
    --bs-btn-hover-bg: var(--color-danger-fill);
    --bs-btn-hover-color: var(--color-on-danger);
    --bs-btn-hover-border-color: var(--color-danger-fill);
    --bs-btn-active-bg: var(--color-danger-fill);
    --bs-btn-active-color: var(--color-on-danger);
    --bs-btn-active-border-color: var(--color-danger-fill);
    --bs-btn-disabled-bg: var(--color-danger-fill);
    --bs-btn-disabled-color: var(--color-on-danger);
    --bs-btn-disabled-border-color: var(--color-danger-fill);
}
.btn-outline-danger {
    --bs-btn-color: var(--color-danger-text);
    --bs-btn-border-color: var(--color-danger-text);
    --bs-btn-hover-bg: var(--color-danger-fill);
    --bs-btn-hover-color: var(--color-on-danger);
    --bs-btn-hover-border-color: var(--color-danger-fill);
    --bs-btn-active-bg: var(--color-danger-fill);
    --bs-btn-active-color: var(--color-on-danger);
    --bs-btn-active-border-color: var(--color-danger-fill);
    --bs-btn-disabled-color: var(--color-danger-text);
    --bs-btn-disabled-border-color: var(--color-danger-text);
}
.btn-warning {
    --bs-btn-bg: var(--color-warning-bg);
    --bs-btn-color: var(--color-warning-text);
    --bs-btn-border-color: var(--color-input-border);
    --bs-btn-hover-bg: var(--color-warning-bg);
    --bs-btn-hover-color: var(--color-warning-text);
    --bs-btn-hover-border-color: var(--color-input-border);
    --bs-btn-active-bg: var(--color-warning-bg);
    --bs-btn-active-color: var(--color-warning-text);
    --bs-btn-active-border-color: var(--color-input-border);
    --bs-btn-disabled-bg: var(--color-warning-bg);
    --bs-btn-disabled-color: var(--color-warning-text);
    --bs-btn-disabled-border-color: var(--color-input-border);
}

/* 6. Shared primitives that only reference roles */
::selection { background: var(--color-accent-subtle); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.brand-logo,
.sidebar-brand-logo {
    background: var(--color-logo-backing);
    padding: var(--logo-backing-padding);
    border-radius: var(--logo-backing-radius);
    box-sizing: border-box;
}