/*
 * Cadre global styles. Brand tokens live here so every page (and any future area under
 * Scout or Steward) reads the same palette.
 */

/*
 * Force light rendering of native form widgets.
 *
 * With the OS in dark mode, Chrome paints input[type=date] and its calendar popup dark
 * regardless of the background set on the input — the popup is browser-drawn and takes
 * its theme from the element's computed color-scheme.
 *
 * Written as plain `light`, NOT `light only`. The grammar is
 * `[ light | dark | <custom-ident> ]+ && only?`, so a parser can take `only` as a
 * custom-ident, drop the whole declaration as invalid, and leave color-scheme at
 * `normal` — which follows the OS and gives a black calendar. v2 uses `light only`
 * (v2-styles.css) and has the same exposure.
 *
 * The <meta name="color-scheme" content="light"> in _Head.cshtml is a weaker hint and is
 * not sufficient on its own; the CSS property has to be present on the elements.
 */
:root {
    color-scheme: light;

    --cadre-navy: #182442;
    --cadre-teal: #34c6a0;
    --cadre-teal-dark: #22a583;
    --cadre-ink: #1e293b;
    --cadre-muted: #64748b;
    --cadre-line: #e1e8ef;
    --cadre-surface: #f8fafc;
}

html {
    color-scheme: light;
    position: relative;
    min-height: 100%;
}

body {
    color-scheme: light;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--cadre-ink);
}

/*
 * Stated again on the controls themselves. color-scheme inherits, so this is belt and
 * braces — but it is also the only place the intent is visible to someone reading the
 * date field's styles, and it survives any future rule that resets the cascade above.
 */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
select,
textarea {
    color-scheme: light;
}

/* The calendar glyph is browser-drawn too; keep it visible against a white field. */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.7;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

a {
    color: var(--cadre-teal-dark);
}