/* Theme: foodratings | source palette: FFF1E9-20242C-BD3E2A-263C64-232B3B-416599-B22637-66707C */
/* Tomato red, white and charcoal (food-ratings-redesign). Maps Bootstrap's semantic colours onto the
   Food Ratings tokens so Bootstrap components on every page share the redesign. Load exactly one
   theme-*.css file, after bootstrap.min.css. Green is deliberately not a brand or status colour. */

:root,
[data-bs-theme="light"] {
    --palette-01: #fff1e9;
    --palette-02: #20242c;
    --palette-03: #bd3e2a;
    --palette-04: #263c64;
    --palette-05: #232b3b;
    --palette-06: #416599;
    --palette-07: #b22637;
    --palette-08: #66707c;

    /* Semantic roles: 03 primary, 08 secondary, 04 success, 06 info, 07 danger, 01 light, 05 dark. */
    --bs-primary: var(--palette-03);
    --bs-primary-rgb: 189, 62, 42;
    --bs-secondary: var(--palette-08);
    --bs-secondary-rgb: 102, 112, 124;
    --bs-success: var(--palette-04);
    --bs-success-rgb: 38, 60, 100;
    --bs-info: var(--palette-06);
    --bs-info-rgb: 65, 101, 153;
    --bs-warning: #935600;
    --bs-warning-rgb: 147, 86, 0;
    --bs-danger: var(--palette-07);
    --bs-danger-rgb: 178, 38, 55;
    --bs-light: #f5f6f8;
    --bs-light-rgb: 245, 246, 248;
    --bs-dark: var(--palette-05);
    --bs-dark-rgb: 35, 43, 59;

    --bs-body-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--palette-02);
    --bs-body-color-rgb: 32, 36, 44;
    --bs-emphasis-color: var(--palette-02);
    --bs-emphasis-color-rgb: 32, 36, 44;
    --bs-secondary-color: var(--palette-08);
    --bs-secondary-color-rgb: 102, 112, 124;
    --bs-secondary-bg: #eef0f3;
    --bs-tertiary-bg: #f5f6f8;
    --bs-border-color: #e6e7e9;
    --bs-link-color: var(--palette-03);
    --bs-link-color-rgb: 189, 62, 42;
    --bs-link-hover-color: #9e3020;
    --bs-link-hover-color-rgb: 158, 48, 32;
    --bs-focus-ring-color: rgba(199, 102, 47, .35);
    --bs-code-color: #9e3020;
    --bs-primary-bg-subtle: var(--palette-01);
    --bs-primary-border-subtle: #f3c7b8;
    --bs-primary-text-emphasis: #944522;
    --bs-secondary-bg-subtle: #f1f3f6;
    --bs-secondary-border-subtle: #dfe2e7;
    --bs-secondary-text-emphasis: #4b5563;
    --bs-success-bg-subtle: #eef1f8;
    --bs-success-border-subtle: #cfd8e8;
    --bs-success-text-emphasis: #263c64;
    --bs-info-bg-subtle: #eef3fa;
    --bs-info-border-subtle: #cddbee;
    --bs-info-text-emphasis: #2e4b75;
    --bs-warning-bg-subtle: #fff7eb;
    --bs-warning-border-subtle: #e8d7b8;
    --bs-warning-text-emphasis: #785225;
    --bs-danger-bg-subtle: #fdecee;
    --bs-danger-border-subtle: #f2c6cc;
    --bs-danger-text-emphasis: #8f1f2d;
}

/* Bootstrap 5.3 compiles button and form colours as literals, so map them to the palette here. */
.btn-primary {
    --bs-btn-bg: var(--palette-03);
    --bs-btn-border-color: var(--palette-03);
    --bs-btn-hover-bg: #9e3020;
    --bs-btn-hover-border-color: #9e3020;
    --bs-btn-active-bg: #9e3020;
    --bs-btn-active-border-color: #9e3020;
    --bs-btn-disabled-bg: var(--palette-03);
    --bs-btn-disabled-border-color: var(--palette-03);
    --bs-btn-focus-shadow-rgb: 189, 62, 42;
}
.btn-outline-primary {
    --bs-btn-color: var(--palette-03);
    --bs-btn-border-color: var(--palette-03);
    --bs-btn-hover-bg: var(--palette-03);
    --bs-btn-hover-border-color: var(--palette-03);
    --bs-btn-active-bg: #9e3020;
    --bs-btn-active-border-color: #9e3020;
    --bs-btn-focus-shadow-rgb: 189, 62, 42;
}
.btn-outline-secondary {
    --bs-btn-color: var(--palette-02);
    --bs-btn-border-color: #d6dae0;
    --bs-btn-hover-bg: #f5f6f8;
    --bs-btn-hover-color: var(--palette-02);
    --bs-btn-hover-border-color: #c8cdd4;
    --bs-btn-active-bg: #eef0f3;
    --bs-btn-active-color: var(--palette-02);
}
.form-check-input:checked { background-color: var(--palette-03); border-color: var(--palette-03); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #e0a089;
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.page-link { --bs-pagination-color: var(--palette-02); --bs-pagination-active-bg: var(--palette-03); --bs-pagination-active-border-color: var(--palette-03); }

/* Exact source-palette utilities. */
.text-palette-01 { color: var(--palette-01) !important; }
.text-palette-02 { color: var(--palette-02) !important; }
.text-palette-03 { color: var(--palette-03) !important; }
.text-palette-04 { color: var(--palette-04) !important; }
.text-palette-05 { color: var(--palette-05) !important; }
.text-palette-06 { color: var(--palette-06) !important; }
.text-palette-07 { color: var(--palette-07) !important; }
.text-palette-08 { color: var(--palette-08) !important; }
.bg-palette-01 { background-color: var(--palette-01) !important; }
.bg-palette-02 { background-color: var(--palette-02) !important; }
.bg-palette-03 { background-color: var(--palette-03) !important; }
.bg-palette-04 { background-color: var(--palette-04) !important; }
.bg-palette-05 { background-color: var(--palette-05) !important; }
.bg-palette-06 { background-color: var(--palette-06) !important; }
.bg-palette-07 { background-color: var(--palette-07) !important; }
.bg-palette-08 { background-color: var(--palette-08) !important; }
.border-palette-01 { border-color: var(--palette-01) !important; }
.border-palette-02 { border-color: var(--palette-02) !important; }
.border-palette-03 { border-color: var(--palette-03) !important; }
.border-palette-04 { border-color: var(--palette-04) !important; }
.border-palette-05 { border-color: var(--palette-05) !important; }
.border-palette-06 { border-color: var(--palette-06) !important; }
.border-palette-07 { border-color: var(--palette-07) !important; }
.border-palette-08 { border-color: var(--palette-08) !important; }