/*
 * Typography scale — single source of truth for font sizes.
 *
 * html { font-size: 14px } makes 1rem = 14px (browser default is 16px).
 * All rem values in the app scale relative to this.
 * Plotly graphs use absolute px defined in config/theme.py to match.
 *
 * Scale:
 *   --fs-xs   0.75rem  10.5px  fine print, badges
 *   --fs-sm   0.8rem   11.2px  table cells, graph annotations
 *   --fs-base 0.85rem  11.9px  body text, axis labels
 *   --fs-md   0.9rem   12.6px  secondary labels, card text
 *   --fs-lg   1rem     14px    card headers, graph titles
 *   --fs-xl   1.15rem  16.1px  section headings (h4–h6)
 *   --fs-2xl  1.3rem   18.2px  page headings (h2–h3)
 *   --fs-3xl  1.6rem   22.4px  h1
 */
:root {
    --fs-xs:   0.75rem;
    --fs-sm:   0.8rem;
    --fs-base: 0.85rem;
    --fs-md:   0.9rem;
    --fs-lg:   1rem;
    --fs-xl:   1.15rem;
    --fs-2xl:  1.3rem;
    --fs-3xl:  1.6rem;
}

html {
    font-size: 14px;
}

/* Custom font faces for igloo fonts */
/* 
To use your custom igloo fonts, place the WOFF2 files in this assets folder and uncomment the sections below:
*/

@font-face {
    font-family: 'igloo-headers';
    src: url('./igloo-headers.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: 'igloo-body';
    src: url('./igloo-body.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}

/* Current fallback configuration using Inter from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Font families - using Inter as fallback for igloo fonts */
.igloo-headers, h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #464855;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

.igloo-body, body, p, span, div {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #464855;
    font-size: var(--fs-base);
}

/* Highlight today's date in all calendar pickers (light orange) */
/* Targets several common datepicker implementations used by Dash/React libraries. */
/* Do not override a day that is already selected — only highlight today's day when not selected. */

/* Airbnb react-dates */
.CalendarDay__today:not(.CalendarDay__selected):not(.CalendarDay--selected),
.CalendarDay--today:not(.CalendarDay__selected):not(.CalendarDay--selected) {
    background: #FFE6CC !important; /* light orange */
    color: #944800 !important; /* darker orange text */
    border-radius: 0px !important;
    box-shadow: inset 0 0 0 0px rgba(148,72,0,0.06) !important;
    transition: background 120ms ease, color 120ms ease;
}

.CalendarDay__today:not(.CalendarDay__selected):not(.CalendarDay--selected):hover,
.CalendarDay--today:not(.CalendarDay__selected):not(.CalendarDay--selected):hover {
    background: #FFD8A8 !important;
}

/* react-day-picker and other variants */
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--disabled),
.DayPicker-Day.today:not(.DayPicker-Day--selected):not(.DayPicker-Day--disabled) {
    background: #FFE6CC !important;
    color: #944800 !important;
    border-radius: 0px !important;
}

/* Common alternate classes used by different datepickers */
.CalendarDay--today:not(.CalendarDay--selected),
.rdp-day_today:not(.rdp-day_selected),
.react-datepicker__day--today:not(.react-datepicker__day--selected) {
    background: #FFE6CC !important;
    color: #944800 !important;
    border-radius: 6px !important;
}

/* Ensure highlight is visible but does not beat explicit selection styling */
.CalendarDay__today.Selectable,
.CalendarDay--today.Selectable {
    outline: none !important;
}