/*
 * Brand layer for the Unfold admin. Unfold injects UNFOLD["STYLES"] *before* its own
 * stylesheet, so anything competing with a token it declares on `:root` needs !important.
 * Rules scoped under an id (#content, #site-name) outrank its utility classes on their own.
 */

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200..800&display=swap");

:root {
    --font-sans: "Raleway", ui-sans-serif, system-ui, sans-serif !important;

    /* Raleway reads noticeably lighter than Unfold's Inter at the same weight. Its utilities
       compile to font-weight: var(--font-weight-*), so shifting the scale one notch here
       thickens every `font-normal`/`font-medium` element at once. */
    --font-weight-normal: 500 !important;
    --font-weight-medium: 600 !important;
    --font-weight-semibold: 700 !important;
    --font-weight-bold: 800 !important;
}

/* Nothing else sets a weight on body, so no !important needed. */
body {
    font-weight: 500;
}

/* Unfold hardcodes h-[38px] on the branding image; the mark is the only <img> in the
   sidebar, and an id selector outranks that class. */
#nav-sidebar img {
    max-height: 30px;
}

/* The wordmark is ExtraBold and tight on calidae.com. */
#site-name {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Unfold gives content links the colour of body text and only tints them on hover, which
   leaves a changelist object link indistinguishable from a plain cell value. The row-wide
   click targets in the other columns keep their own classes and are deliberately left out. */
#content a:not([class]),
#content a.text-important,
#content a.showall {
    color: var(--color-primary-600);
    font-weight: 600;
}

.dark #content a:not([class]),
.dark #content a.text-important,
.dark #content a.showall {
    color: var(--color-primary-500);
}

#content a:not([class]):hover,
#content a.text-important:hover,
#content a.showall:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}