/* Hallmark · genre: modern-minimal · macrostructure: app working surfaces · theme: Cobalt (app adaptation)
 * tone: utilitarian · anchor hue: 262 · design-system: design.md · designed-as-app
 * contrast: pass (40–41) except warning-as-small-text (3.2:1, see design.md) · tokens: pass (48) for restyled surfaces
 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R5 V5 */

/* Vision.Web design tokens. Vision.Web/design.md explains the system.

   Colour has one switch. The MudTheme palettes (Components/Layout/MainLayout/VisionThemeDefinition.cs)
   hold the light and dark values MudBlazor needs as hex, and MudThemeProvider swaps the
   --mud-palette-* variables when dark mode changes. The --color-* tokens below alias those
   variables, so anything styled with them follows the theme without its own dark rules.

   Colours MudBlazor has no slot for (status fills, schedule appointment ink) are defined here
   in OKLCH. The ones that need a different dark value are overridden under
   .vision-theme-scope[data-vision-theme="dark"], which MainLayout sets from its dark-mode state.
   Not a bare [data-theme]: the Fluent UI script writes data-theme="dark" on <body> from its own
   stored or system theme, which can disagree with Vision's toggle. */

:root {
    /* Type */
    --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Dense app scale. 14px is the table and form size, 12px the floor for meta text. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5625rem;
    --text-2xl: 1.953rem;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-strong: 600;

    --tracking-tight: -0.015em;
    --tracking-label: 0.04em;

    /* Space: 4pt scale */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;

    /* Shape. --radius-md matches MudTheme DefaultBorderRadius, so custom containers and MudPaper
       cards share one corner. */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-card: var(--radius-md);
    --radius-pill: 999px;

    --rule-width: 1px;
    --rule-accent-width: 2px;

    /* Elevation. Cards sit on a rule, not a shadow; only floating layers (drawers, popovers)
       get the overlay shadow. */
    --shadow-whisper: 0 1px 2px oklch(20% 0.02 262 / 0.06);
    --shadow-overlay: 0 8px 24px oklch(20% 0.02 262 / 0.16);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-micro: 120ms;
    --dur-short: 220ms;
    --dur-long: 420ms;

    /* Touch: minimum tap target under (any-pointer: coarse) */
    --tap-target: 44px;

    /* Surfaces and ink (theme aliases) */
    --color-paper: var(--mud-palette-background);
    --color-surface: var(--mud-palette-surface);
    --color-surface-2: var(--mud-palette-background-gray);
    --color-ink: var(--mud-palette-text-primary);
    --color-ink-2: var(--mud-palette-text-secondary);
    --color-ink-3: var(--mud-palette-text-disabled);
    --color-rule: var(--mud-palette-lines-default);
    --color-rule-strong: var(--mud-palette-lines-inputs);
    --color-hover: var(--mud-palette-action-default-hover);

    /* The one accent: actions, the active tab, links, focus */
    --color-accent: var(--mud-palette-primary);
    --color-accent-strong: var(--mud-palette-primary-darken);
    --color-accent-ink: var(--mud-palette-primary-text);
    --color-focus: var(--mud-palette-primary);

    /* Signal colours (theme aliases) */
    --color-success: var(--mud-palette-success);
    --color-warning: var(--mud-palette-warning);
    --color-error: var(--mud-palette-error);
    --color-info: var(--mud-palette-info);

    /* Washes: quiet tints for selected rows and urgency backgrounds. Mixed in oklab so the hue
       does not drift toward the surface's hue. */
    --color-accent-wash: color-mix(in oklab, var(--color-accent) 9%, var(--color-surface));
    --color-success-wash: color-mix(in oklab, var(--color-success) 10%, var(--color-surface));
    --color-warning-wash: color-mix(in oklab, var(--color-warning) 13%, var(--color-surface));
    --color-error-wash: color-mix(in oklab, var(--color-error) 9%, var(--color-surface));
    --color-info-wash: color-mix(in oklab, var(--color-info) 9%, var(--color-surface));

    /* Status chip fills. Each keeps the hue staff already know for that status; lightness is
       tuned so the paired ink passes 4.5:1. Solid fills read the same on light and dark pages. */
    --status-on-fill: oklch(99% 0.003 262);
    --status-on-fill-dark: oklch(22% 0.02 262);

    --status-pending: oklch(78% 0.15 77);
    --status-pending-ink: var(--status-on-fill-dark);
    --status-hold: oklch(68% 0.13 89);
    --status-hold-ink: var(--status-on-fill-dark);
    --status-needs-quote: oklch(52% 0.105 78);
    --status-needs-quote-ink: var(--status-on-fill);
    --status-quoted: oklch(49% 0.2 318);
    --status-quoted-ink: var(--status-on-fill);
    --status-quote-accepted: oklch(36% 0.17 296);
    --status-quote-accepted-ink: var(--status-on-fill);
    --status-dispatch: oklch(51% 0.125 245);
    --status-dispatch-ink: var(--status-on-fill);
    --status-parts: oklch(45% 0.18 293);
    --status-parts-ink: var(--status-on-fill);
    --status-field-complete: oklch(50% 0.13 144);
    --status-field-complete-ink: var(--status-on-fill);
    --status-work-complete: oklch(41% 0.11 144);
    --status-work-complete-ink: var(--status-on-fill);
    --status-invoiced: oklch(71% 0.17 50);
    --status-invoiced-ink: var(--status-on-fill-dark);
    --status-paid: oklch(50% 0.09 182);
    --status-paid-ink: var(--status-on-fill);
    --status-quote-expired: oklch(45% 0.05 40);
    --status-quote-expired-ink: var(--status-on-fill);
    --status-quote-canceled: oklch(52% 0.19 27);
    --status-quote-canceled-ink: var(--status-on-fill);

    /* Schedule appointments keep their original pastel hex fills (ScheduleColors.cs, and the
       month item blue below) in both themes, so the text on them stays dark in both themes too. */
    --appt-ink: oklch(23.5% 0.022 262);
    --appt-ink-2: oklch(40% 0.02 262);
    --appt-month: #8cc0e5;

    /* Year-view load heat: four steps of the accent */
    --heat-1: color-mix(in oklab, var(--color-accent) 14%, var(--color-surface));
    --heat-2: color-mix(in oklab, var(--color-accent) 34%, var(--color-surface));
    --heat-3: color-mix(in oklab, var(--color-accent) 64%, var(--color-surface));
    --heat-4: var(--color-accent-strong);

    /* Dim layer behind an in-page overlay panel */
    --color-scrim: oklch(17% 0.015 262 / 0.35);

    /* Route map markers sit on map tiles, which keep their colours in dark mode, so these are
       fixed in both themes. Origin green, destination red, stops and the route line blue with
       yellow numbers, the focused stop orange. Each label passes 4.5:1 on its fill. */
    --map-origin: #15803d;
    --map-destination: #b91c1c;
    --map-stop: #1d4ed8;
    --map-stop-ink: #fde047;
    --map-focus: #c2410c;
    --map-marker-ink: #ffffff;
    --map-marker-ring: #ffffff;
    --map-marker-shadow: 0 2px 8px oklch(20% 0.02 262 / 0.4);
}

.vision-theme-scope[data-vision-theme="dark"] {
    --shadow-whisper: 0 1px 2px oklch(0% 0 0 / 0.3);
    --shadow-overlay: 0 8px 24px oklch(0% 0 0 / 0.45);
}