/*
 * RampWorks theme for InvoiceShelf.
 *
 * InvoiceShelf draws its whole interface from eleven CSS variables, the
 * "primary" scale, and one font variable. Redefining those re-colours every
 * button, link, focus ring, badge and the header without touching a class.
 *
 * `:root:root` is deliberate. This sheet is linked before the application's
 * own, which sets the same variables on `:root`; doubling the selector raises
 * the specificity so these win whatever the order.
 *
 * The scale is RampWorks' teal ramp from rampworks.au, shifted one step dark:
 * InvoiceShelf puts white text on primary-500, and the site's teal-500
 * (#21afcb) is too light for that. Brand teal-700 (#087b94, also the site's
 * theme-color) sits at 500 instead and gives 4.9:1 against white.
 */

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/storage/branding/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(/storage/branding/fonts/space-grotesk-latin-600-normal.woff2) format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(/storage/branding/fonts/space-grotesk-latin-700-normal.woff2) format("woff2");
}

:root:root {
    --color-primary-50: #eef8fa;   /* teal-50 */
    --color-primary-100: #d9f1f4;  /* teal-100 */
    --color-primary-200: #b0e2ea;
    --color-primary-300: #6fcadb;
    --color-primary-400: #21afcb;  /* teal-500 */
    --color-primary-500: #087b94;  /* teal-700, the brand colour */
    --color-primary-600: #076a80;
    --color-primary-700: #065465;  /* teal-800 */
    --color-primary-800: #05414f;
    --color-primary-900: #04303b;  /* teal-900 */
    --color-primary-950: #071d2b;  /* navy-900 */

    --font-base: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --rw-amber: #f4ad3f;
    --rw-ink: #10242f;
}

/* Display type, as on rampworks.au: Space Grotesk for headings only. */
h1,
h2,
h3 {
    font-family: "Space Grotesk", var(--font-base);
    letter-spacing: -0.02em;
}

/* The few colours InvoiceShelf hard-codes instead of taking from the scale. */

/* Page-load progress bar and spinner. */
.pace .pace-progress {
    background: var(--rw-amber);
}

.pace .pace-activity {
    border-top-color: var(--color-primary-500);
    border-left-color: var(--color-primary-500);
}

/* Selected days in the date picker. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
}