/*
 * Theme: the Inter font faces and the design tokens. A theme is one set of values for the tokens below; site.css builds
 * every component from them and from its own layout tokens (spacing, control sizes, breakpoints), so it never names a
 * color, font, font size, radius, shadow, gradient or duration itself.
 *
 * The roles: a page, surfaces stacked on it, content colors for text on those surfaces, one primary accent with its
 * hover and pressed steps, a tonal "container" of that accent, outlines in three strengths, and the feedback hues
 * (danger, success, warning) each as a strong color, a container and an outline.
 *
 * The light theme is the default (:root) and also answers to data-theme="light"; the dark theme answers to
 * data-theme="dark". The layout's head script and theme.js set data-theme on <html>; for the "system" choice they set the
 * theme the operating system asks for (prefers-color-scheme), so CSS only ever sees a real theme name. To add a theme:
 *   1. add a block :root[data-theme="<name>"] { … } below the light one, overriding the same tokens (start with
 *      color-scheme and the palette: the roles derive from the palette with color-mix(), so they follow it unless the
 *      block overrides them too);
 *   2. add a segment to the theme group in Views/Shared/_Preferences.cshtml, like its neighbours: a label with
 *      data-i18n-attr="title:theme.<name>" holding <input type="radio" name="theme" value="<name>">, an icon and a
 *      .visually-hidden span with data-i18n="theme.<name>" (theme.js offers exactly those options, plus "system"); an
 *      icon the app does not use yet needs its rule in site.css;
 *   3. add the key theme.<name> to both dictionaries in wwwroot/js/i18n.js;
 *   4. add the name to the list of real themes in the layout's head script (Views/Shared/_Layout.cshtml), which treats
 *      any other stored value as "system".
 * No component selectors here: a theme that needs one has found a token that is missing.
 */

/* Inter 4.1, served from /lib/inter (see its README). Only the latin and latin-ext subsets are shipped; the
   unicode-range values are copied from the package's wght.css and wght-italic.css, so the browser fetches the latin-ext
   files only for text that needs them. German needs only the latin files. */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/inter/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter Variable";
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/inter/inter-latin-ext-wght-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter Variable";
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/inter/inter-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Light: a pale blue-white page, white surfaces and one deep blue as the interactive accent. The six brand colors come
   from the brand sheet; every role derives from them with color-mix(), except the feedback hues the brand has none for
   (red, green, amber). Contrast on white: ink 16:1, muted text 6.2:1, primary 6.3:1 (text and icons), control outline
   3.1:1 (WCAG asks 3:1 for control edges), secondary 3.9:1 (icons and decoration only, never body text). */
:root,
:root[data-theme="light"] {
    color-scheme: light;

    /* Palette: the brand colors, then the feedback hues outside the brand. Components never use these directly. */
    --palette-white: #ffffff;
    --palette-ink: #0b1f3a;
    --palette-primary: #1f5faf;
    --palette-secondary: #5b84b8;
    --palette-border: #a9c8ee;
    --palette-surface: #dceaf9;
    --palette-background: #f4f8fd;
    --palette-red: #b3261e;
    --palette-green: #1e7a46;
    --palette-amber: #f5a623;

    /* Surfaces, from the page up. Cards, the app bar, menus, inputs and dialogs are white on the pale page, set apart by
       tone and a hairline rather than heavy shadows. surface-sunken is the quiet well inside a card (table headers,
       editor toolbars, code, the drop zone); surface-tonal is the accent's tint (tonal buttons, chips, selected items). */
    --color-page: var(--palette-background);
    --color-surface: var(--palette-white);
    --color-surface-sunken: color-mix(in srgb, var(--palette-surface) 35%, var(--palette-white));
    --color-surface-tonal: var(--palette-surface);
    --color-scrim: color-mix(in srgb, var(--palette-ink) 45%, transparent); /* behind dialogs and the mobile menu */

    /* Content: text and icons. Gray is the ink mixed into white rather than an opacity, so it keeps its contrast on every
       surface. subtle (3.2:1) is for placeholders and disabled text only, which WCAG exempts. */
    --color-text: var(--palette-ink);
    --color-text-muted: color-mix(in srgb, var(--palette-ink) 70%, var(--palette-white));
    --color-text-subtle: color-mix(in srgb, var(--palette-ink) 50%, var(--palette-white));
    --color-text-on-primary: var(--palette-white);
    --color-text-on-hero: var(--palette-white); /* text and decoration on the signed-out hero's gradient */
    /* The logo in the app bar and footer, in the colors of wwwroot/favicon.svg: the compass in ink, its arc a bright blue
       of its own (the brand's primary is too deep to read as the arc's highlight). */
    --color-logo: var(--palette-ink);
    --color-logo-accent: #2f7ae5;
    --color-hero-action: var(--palette-white); /* the hero's call to action (.btn-inverse), with its hover and text */
    --color-hero-action-hover: var(--palette-surface);
    --color-text-on-hero-action: var(--palette-primary);
    --color-link: var(--palette-primary);
    --color-selection: color-mix(in srgb, var(--palette-border) 70%, var(--palette-white)); /* selected text */

    /* Primary accent: filled buttons, links, the active tab, checked switches and pills, focus. The container is its
       tint, with a darker blue for the content on it (7.4:1 on the container). */
    --color-primary: var(--palette-primary);
    --color-primary-hover: color-mix(in srgb, var(--palette-primary) 86%, var(--palette-ink));
    --color-primary-pressed: color-mix(in srgb, var(--palette-primary) 72%, var(--palette-ink));
    --color-primary-container: var(--palette-surface);
    --color-primary-container-hover: color-mix(in srgb, var(--palette-surface) 82%, var(--palette-border));
    --color-on-primary-container: color-mix(in srgb, var(--palette-primary) 70%, var(--palette-ink));
    --color-secondary: var(--palette-secondary); /* decorative icons, timeline lines */

    /* State layers: a translucent wash of the accent over whatever surface an item sits on, so hover and
       pressed work on white, on the page and in the sunken well alike. */
    --color-state-hover: color-mix(in srgb, var(--palette-primary) 7%, transparent);
    --color-state-pressed: color-mix(in srgb, var(--palette-primary) 13%, transparent);
    --color-state-selected: color-mix(in srgb, var(--palette-primary) 10%, transparent);

    /* Outlines, three strengths: control (inputs, outlined buttons, unchecked controls, 3.1:1), outline (dividers that
       must be seen, the dashed drop zone) and outline-variant (card edges and hairlines), plus divider for table rows. */
    --color-outline-control: color-mix(in srgb, var(--palette-secondary) 85%, var(--palette-white));
    --color-outline-control-hover: var(--palette-secondary);
    --color-switch-off-hover: color-mix(in srgb, var(--palette-secondary) 72%, var(--palette-ink)); /* the off track of a switch under the pointer */
    --color-switch-off: color-mix(in srgb, var(--palette-secondary) 78%, var(--palette-white)); /* the off track of a switch: the secondary blue, lightened */
    --color-outline: var(--palette-border);
    --color-outline-variant: color-mix(in srgb, var(--palette-border) 55%, var(--palette-white));
    --color-divider: color-mix(in srgb, var(--palette-border) 30%, var(--palette-white));
    --color-focus: var(--palette-primary);

    /* Scrollbars (the page's and every scrolling box's): the thumb takes the control outline's strength, so it follows
       the theme, and the track stays clear so the surface behind it shows. */
    --color-scrollbar-thumb: var(--color-outline-control);
    --color-scrollbar-track: transparent;

    /* Feedback: each hue as a strong color (text, icons, filled danger button), a container (banner and chip fill) and an
       outline. Strong colors reach at least 4.5:1 on white and on their container. */
    --color-danger: var(--palette-red);
    --color-danger-hover: color-mix(in srgb, var(--palette-red) 85%, var(--palette-ink));
    --color-danger-container: color-mix(in srgb, var(--palette-red) 7%, var(--palette-white));
    --color-danger-outline: color-mix(in srgb, var(--palette-red) 35%, var(--palette-white));
    --color-success: var(--palette-green);
    --color-success-container: color-mix(in srgb, var(--palette-green) 9%, var(--palette-white));
    --color-success-outline: color-mix(in srgb, var(--palette-green) 35%, var(--palette-white));
    --color-warning: color-mix(in srgb, var(--palette-amber) 45%, var(--palette-ink)); /* amber text, 5.6:1 */
    --color-warning-container: color-mix(in srgb, var(--palette-amber) 14%, var(--palette-white));
    --color-warning-outline: var(--palette-amber);
    --color-info-container: var(--color-primary-container);
    --color-info-outline: var(--palette-border);

    /* Request status chips by status category: new is neutral, in progress the accent, done green. The dot carries the
       hue; the text keeps at least 4.5:1 on the chip. */
    --color-status-new-bg: color-mix(in srgb, var(--palette-surface) 45%, var(--palette-white));
    --color-status-new-fg: var(--color-text-muted);
    --color-status-new-dot: var(--palette-secondary);
    --color-status-indeterminate-bg: var(--palette-surface);
    --color-status-indeterminate-fg: var(--color-on-primary-container);
    --color-status-indeterminate-dot: var(--palette-primary);
    --color-status-done-bg: var(--color-success-container);
    --color-status-done-fg: var(--color-success);
    --color-status-done-dot: color-mix(in srgb, var(--palette-green) 80%, var(--palette-white));

    /* Priority icons: the urgent levels warm, the calm ones blue-gray. Icon strokes need 3:1. */
    --color-priority-highest: var(--palette-red);
    --color-priority-high: var(--color-warning);
    --color-priority-medium: var(--palette-primary);
    --color-priority-low: var(--palette-secondary);
    --color-priority-lowest: var(--palette-secondary);
    --color-priority-unknown: var(--color-text-subtle);

    /* Internal (staff-only) comments: the amber, so they stand apart from everything a customer sees. */
    --color-internal-bg: var(--color-warning-container);
    --color-internal-border: var(--palette-amber);
    --color-internal-badge-bg: var(--palette-amber);
    --color-internal-badge-fg: var(--palette-ink);

    /* Avatars: six blue tones, picked per person from a hash of the name, each with initials of at least 4.5:1. */
    --color-avatar-1-bg: var(--palette-surface);
    --color-avatar-1-fg: var(--color-on-primary-container);
    --color-avatar-2-bg: var(--palette-primary);
    --color-avatar-2-fg: var(--palette-white);
    --color-avatar-3-bg: color-mix(in srgb, var(--palette-secondary) 70%, var(--palette-ink));
    --color-avatar-3-fg: var(--palette-white);
    --color-avatar-4-bg: var(--palette-ink);
    --color-avatar-4-fg: var(--palette-white);
    --color-avatar-5-bg: var(--palette-border);
    --color-avatar-5-fg: var(--palette-ink);
    --color-avatar-6-bg: color-mix(in srgb, var(--palette-primary) 55%, var(--palette-ink));
    --color-avatar-6-fg: var(--palette-white);

    /* Typography: one family everywhere, monospace only for code and log messages, four sizes and three weights.
         xl (24px) semibold, tight: the page titles (main h1, the request title, the hero title);
         lg (16px) semibold, tight: every card, section and dialog title, the document h2 and the brand name;
         md (14px): body text, descriptions, comments, field values, inputs, selects, buttons, links, table cells, tabs,
           menu items and banners; form field labels, tabs, secondary buttons and type options medium; names of people,
           primary buttons and the document h3 semibold;
         sm (12px), muted: labels above values and table headers (medium), meta text such as times, file sizes, roles,
           breadcrumbs, helper and required notes, the page size and the footer; chips, lozenges and badges (medium); field
           errors in the danger color.
       Titles take the tight line height, body text the base one; one-line 12px meta may take the tight one. Icons
       take the size of the text next to them, a standalone icon button lg. */
    --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --font-size-sm: 0.75rem;
    --font-size-md: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.5rem;
    --font-weight-regular: 400; /* body text */
    --font-weight-medium: 500; /* labels, tabs, secondary buttons, chips */
    --font-weight-semibold: 600; /* titles, names, primary emphasis */
    --line-height-tight: 1.3;
    --line-height-base: 1.55;
    --letter-spacing-tight: -0.015em; /* lg and xl: Inter is drawn for text sizes and runs wide when set large */
    --letter-spacing-caps: 0.04em; /* the rare uppercase overline */
    --letter-spacing-code: 0.3em; /* the digits of a sign-in code, spaced out */

    /* Radii: sm for chips inside controls, toolbar buttons and code; md for buttons, inputs, menus' items and dropdowns;
       lg for cards and menus; xl for dialogs and the hero; pill for status chips, badges, filter pills and switches. */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* Elevation: ink- and blue-tinted rather than black, so shadows read as depth instead of dirt on the pale page. 1 for
       resting cards and filled buttons, 2 for hover lift and the scrolled app bar, 3 for menus and popovers, 4 for
       dialogs and the mobile menu. */
    --shadow-1: 0 1px 2px color-mix(in srgb, var(--palette-ink) 6%, transparent);
    --shadow-2: 0 1px 2px color-mix(in srgb, var(--palette-ink) 5%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--palette-primary) 14%, transparent);
    --shadow-3: 0 2px 6px -2px color-mix(in srgb, var(--palette-ink) 10%, transparent), 0 12px 28px -6px color-mix(in srgb, var(--palette-primary) 22%, transparent);
    --shadow-4: 0 8px 16px -8px color-mix(in srgb, var(--palette-ink) 16%, transparent), 0 28px 64px -12px color-mix(in srgb, var(--palette-ink) 30%, transparent);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--palette-primary) 24%, transparent); /* the halo of a focused control */

    /* Gradients. The hero is a deep diagonal from the accent into the ink with a soft light in one corner; the page glow
       is a background image layered over --color-page near the top; the accent line marks the active tab and the hero's
       eyebrow; the tile tints icon tiles. Amber never appears in a gradient: it is kept for staff-only content. */
    --gradient-hero: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--palette-secondary) 55%, transparent), transparent 55%), linear-gradient(135deg, var(--palette-primary), var(--palette-ink));
    --gradient-page: radial-gradient(1100px 420px at 50% -160px, color-mix(in srgb, var(--palette-border) 40%, transparent), transparent);
    --gradient-accent: linear-gradient(90deg, var(--palette-primary), var(--palette-secondary));
    --gradient-tile: linear-gradient(135deg, var(--palette-surface), color-mix(in srgb, var(--palette-surface) 25%, var(--palette-white)));
    --gradient-primary: linear-gradient(180deg, color-mix(in srgb, var(--palette-primary) 90%, var(--palette-white)), var(--palette-primary)); /* filled buttons: lit from above */
    --gradient-skeleton: linear-gradient(90deg, var(--color-surface-sunken), var(--palette-surface), var(--color-surface-sunken));

    /* Motion: short; decelerating on the way in (emphasized for things that travel, like menus and the drawer),
       accelerating on the way out. prefers-reduced-motion turns it all off in site.css. */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
    --ease-exit: cubic-bezier(0.3, 0, 1, 1);
}

/* Dark: slate surfaces and a soft blue accent. The page is a near-black petrol, the cards a step lighter and the tonal
   tints (chips, pills, tiles) one step above those, so depth reads from tone where shadows barely show. The accent is a
   lightened brand blue (the brand blue itself is only about 2.6:1 on the cards), which carries dark text on filled
   buttons; the warm peach appears only where the light theme has its accent line, giving the night one warm note
   without a second interactive color. The palette names keep their light meaning by role: "white" is the card surface,
   "ink" the text. Contrast on cards (#11212d): ink 13.4:1, muted text 7.2:1, primary 5.7:1, control outline 3.3:1,
   red 5.5:1, green 7.4:1; the card color on the primary (dark text on filled buttons) and on red above 4.5:1. The red's
   container mixes into the page rather than the card, so the red text on it keeps 5.4:1. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --palette-white: #11212d;
    --palette-ink: #dceaf9;
    --palette-primary: #6e9bd8;
    --palette-secondary: #9ba8ab;
    --palette-border: #253745;
    --palette-surface: #1b2c39;
    --palette-background: #06141b;
    --palette-red: #f26b68;
    --palette-green: #4cc38a;
    --palette-amber: #f5a623;
    --palette-accent: #fda481; /* dark only: the warm end of the accent line */
    --palette-shadow: #02090d; /* dark only: shadows and the scrim, which the light theme tints with its ink */

    /* The well inside a card sits below it, between the card and the page: lighter than the card it would read as raised,
       and a raised item in it (the checked theme segment) would sink. */
    --color-surface-sunken: color-mix(in srgb, var(--palette-background) 55%, var(--palette-white));
    --color-scrim: color-mix(in srgb, var(--palette-shadow) 62%, transparent);
    --color-text-on-hero: var(--palette-ink);
    --color-logo: #ffffff; /* the dark favicon's white compass and light blue arc */
    --color-logo-accent: #6fb1ff;
    /* The hero's call to action stays the light one on the dark hero: a card-colored button would sink into it. */
    --color-hero-action: var(--palette-ink);
    --color-hero-action-hover: color-mix(in srgb, var(--palette-ink) 82%, var(--palette-primary));
    --color-text-on-hero-action: var(--palette-background);
    --color-selection: color-mix(in srgb, var(--palette-primary) 35%, var(--palette-white));

    /* A light wash needs a little more strength on a dark surface to be seen. */
    --color-state-hover: color-mix(in srgb, var(--palette-primary) 10%, transparent);
    --color-state-pressed: color-mix(in srgb, var(--palette-primary) 16%, transparent);
    --color-state-selected: color-mix(in srgb, var(--palette-primary) 14%, transparent);
    --color-switch-off: var(--palette-secondary);

    /* Card edges and hairlines: on dark the mixed-down light values would vanish into the card. The outline that must be
       seen (the dashed drop zone) takes a step more than the hairline, which already uses the border color. */
    --color-outline: color-mix(in srgb, var(--palette-secondary) 60%, var(--palette-white));
    --color-outline-variant: var(--palette-border);
    --color-divider: color-mix(in srgb, var(--palette-border) 70%, var(--palette-white));

    --color-danger-container: color-mix(in srgb, var(--palette-red) 14%, var(--palette-background));
    --color-success-container: color-mix(in srgb, var(--palette-green) 14%, var(--palette-white));
    --color-warning-container: color-mix(in srgb, var(--palette-amber) 16%, var(--palette-white));

    /* Dark text on the amber badge, as in the light theme. */
    --color-internal-badge-fg: var(--palette-background);

    --shadow-1: 0 1px 2px color-mix(in srgb, var(--palette-shadow) 40%, transparent);
    --shadow-2: 0 1px 2px color-mix(in srgb, var(--palette-shadow) 40%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--palette-shadow) 45%, transparent);
    --shadow-3: 0 2px 6px -2px color-mix(in srgb, var(--palette-shadow) 50%, transparent), 0 12px 28px -6px color-mix(in srgb, var(--palette-shadow) 60%, transparent);
    --shadow-4: 0 8px 16px -8px color-mix(in srgb, var(--palette-shadow) 60%, transparent), 0 28px 64px -12px color-mix(in srgb, var(--palette-shadow) 70%, transparent);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--palette-primary) 32%, transparent);

    --gradient-hero: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--palette-primary) 30%, transparent), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--palette-primary) 28%, var(--palette-white)), var(--palette-background));
    --gradient-page: radial-gradient(1100px 420px at 50% -160px, color-mix(in srgb, var(--palette-primary) 12%, transparent), transparent);
    --gradient-accent: linear-gradient(90deg, var(--palette-primary), var(--palette-accent));
    --gradient-tile: linear-gradient(135deg, var(--palette-surface), color-mix(in srgb, var(--palette-surface) 40%, var(--palette-white)));
    --gradient-primary: linear-gradient(180deg, color-mix(in srgb, var(--palette-primary) 90%, var(--palette-ink)), var(--palette-primary));
}