/**
 * Siddiqui Caterers — global typography
 * Montserrat: sidebar + headings
 * Inter: body UI, forms, tables, buttons
 */

:root {
    --font-heading: "Montserrat", system-ui, sans-serif;
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Type scale (1rem = 16px) */
    --text-xs: 0.7rem;       /* 12px */
    --text-sm: 0.8rem;      /* 14px */
    --text-base: 1rem;        /* 16px */
    --text-lg: 1.125rem;      /* 18px */
    --text-xl: 1.25rem;       /* 20px */
    --text-2xl: 1.5rem;       /* 24px */
    --text-3xl: 1.875rem;     /* 30px */
    --text-4xl: 2.25rem;      /* 36px */

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Component tokens */
    --btn-font-size: var(--text-sm);
    --btn-font-size-sm: var(--text-xs);
    --btn-font-size-lg: var(--text-base);
    --label-font-size: var(--text-sm);
    --input-font-size: var(--text-sm);
    --table-font-size: var(--text-sm);
    --table-header-font-size: var(--text-sm);
    --badge-font-size: var(--text-xs);
    --caption-font-size: var(--text-xs);

    /* Bootstrap 5 */
    --bs-body-font-family: var(--font-sans);
    --bs-font-sans-serif: var(--font-sans);
    --bs-body-font-size: var(--text-base);
    --bs-body-line-height: var(--leading-normal);
    --bs-btn-font-family: var(--font-sans);
    --bs-btn-font-size: var(--btn-font-size);
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* —— Headings —— */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title,
.card-title,
.modal-title,
.offcanvas-title,
.accordion-header .accordion-button,
.dt-index-stats .dt-stat-value {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: inherit;
}

h1, .h1 { font-size: var(--text-4xl); }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); }
h5, .h5 { font-size: var(--text-lg); }
h6, .h6 { font-size: var(--text-base); }

/* —— Sidebar (Montserrat) —— */
.sidebar,
#sidebarOffcanvas,
.sidebar .offcanvas-body {
    font-family: var(--font-heading);
}

.sidebar .sidebar-brand,
.sidebar .user-name,
#sidebarOffcanvas .user-name {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
}

.sidebar .nav-section-title,
#sidebarOffcanvas .nav-section-title {
    font-size: var(--text-xs) !important;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
}

.sidebar .nav-link,
#sidebarOffcanvas .nav-link {
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-medium);
}

.sidebar .nav-link .nav-text,
#sidebarOffcanvas .nav-link {
    font-family: inherit;
}

.sidebar .sidebar-brand {
    font-size: var(--text-lg);
}

.sidebar .user-name {
    font-size: var(--text-sm) !important;
}

.sidebar .user-role {
    font-size: var(--text-xs) !important;
}

.sidebar .nav-badge {
    font-size: var(--text-xs);
    font-family: var(--font-sans);
}

/* —— Body text (Inter); links/spans inherit from parent —— */
:where(
    p, li, td, th, tr, label,
    input, textarea, select, option, button,
    .btn, .form-control, .form-select, .form-check-label,
    .input-group-text, .dropdown-item, .list-group-item,
    .table, .alert, .toast, .badge, small, .small,
    .accordion-body, .dt-info
) {
    font-family: var(--font-sans);
    font-weight: var(--weight-normal);
}

.main-content,
.main-content .card-body,
.main-content .modal-body,
.main-content .offcanvas-body {
    font-family: var(--font-sans);
}

p {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin-bottom: 0.75rem;
}

p:last-child {
    margin-bottom: 0;
}

span,
a {
    font-size: inherit;
    line-height: inherit;
}

strong,
b {
    font-weight: var(--weight-normal);
}

small,
.small {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

/* —— Labels & forms —— */
label,
.form-label,
.col-form-label {
    font-family: var(--font-sans);
    font-size: var(--label-font-size);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
}

.form-control,
.form-select,
.form-check-label,
.input-group-text,
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    font-family: var(--font-sans);
    font-size: var(--input-font-size);
    line-height: var(--leading-normal);
}

.form-text,
.invalid-feedback,
.valid-feedback {
    font-size: var(--text-xs);
}

/* —— Buttons —— */
.btn {
    font-family: var(--font-sans);
    font-size: var(--btn-font-size);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
}

.btn-sm,
.btn-group-sm > .btn {
    font-size: var(--btn-font-size-sm);
}

.btn-lg,
.btn-group-lg > .btn {
    font-size: var(--btn-font-size-lg);
}

/* —— Tables —— */
table,
.table,
table.dataTable {
    font-family: var(--font-sans);
    font-size: var(--table-font-size);
}

table thead th,
.table thead th,
table.dataTable thead th,
table tfoot th,
.table tfoot th {
    font-family: var(--font-sans);
    font-size: var(--table-header-font-size);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
}

table tbody td,
.table tbody td,
table tbody th,
.table tbody th,
table.dataTable tbody td,
table.dataTable tbody th,
tr,
td,
th {
    font-size: var(--table-font-size);
    line-height: var(--leading-normal);
}

/* —— Cards & page chrome —— */
.card-header,
.card-footer {
    font-size: var(--text-sm);
}

.card-body {
    font-size: var(--text-base);
}

.card-header .card-title,
.card-body .card-title {
    font-family: var(--font-heading);
}

/* —— DataTables chrome —— */
.dt-info,
.dt-length label,
.dataTables_info,
.dataTables_length label {
    font-size: var(--text-sm);
}

/* —— Select2 (matches form controls) —— */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-results__option {
    font-family: var(--font-sans) !important;
    font-size: var(--input-font-size) !important;
}

/* —— Badges & chips —— */
.badge {
    font-size: var(--badge-font-size);
    font-weight: var(--weight-medium);
    line-height: 1.2;
}

/* —— Dropdowns & menus —— */
.dropdown-menu {
    font-size: var(--text-sm);
}

.dropdown-header {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* —— Legacy page classes in style.css —— */
.hellotext {
    font-family: var(--font-heading) !important;
}

/* Responsive heading scale */
@media (max-width: 767.98px) {
    h1, .h1 { font-size: var(--text-3xl); }
    h2, .h2 { font-size: var(--text-2xl); }
    h3, .h3 { font-size: var(--text-xl); }
    h4, .h4 { font-size: var(--text-lg); }
}