/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   Direction: soft warm - a warm off-white canvas with white panels floating
   on it, generous radii and gentle depth.

   Division of labour, and the reason for it:

     Settings.cs owns COLOUR.  MudThemeProvider renders a :root block from
     inside <body>, i.e. after everything in <head>, so nothing here can
     override --mud-palette-*.  That is fine, because we never try to.  We
     *alias* those variables instead - var() resolves at use time, so when
     the provider swaps to the dark palette every --fp-* alias below follows
     for free, with no duplication and no dark-mode block to maintain.

     theme.css owns EVERYTHING ELSE - the scales MudBlazor has no concept of:
     spacing, motion, radius beyond the single default, our own elevation
     ramp, and component geometry.

   The only literals that get a dark override are the ones that genuinely
   cannot derive from a palette entry - shadows, chiefly, since a shadow
   tuned for a light canvas is invisible on a dark one.

   Discipline rule: this file contains exactly two selectors, :root and
   :root[data-theme="dark"], and declares nothing but custom properties.
   If you are writing a rule here, it belongs in app.css or a .razor.css.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- surfaces -------------------------------------------------------
       canvas is the warm ground; surface is the white panel that floats on
       it; sunken is the recessed fill used for inputs and selected rows. */
    --fp-canvas: var(--mud-palette-background);
    --fp-surface: var(--mud-palette-surface);
    --fp-surface-soft: var(--mud-palette-background-gray);
    --fp-surface-sunken: #f2f0ec;
    --fp-surface-translucent: rgba(250, 249, 247, 0.82);

    /* Chat bubbles. A wash of the text colour over whatever the page happens to
       be, rather than a fixed grey - so it darkens in the dark theme instead of
       staying a bright panel with light text on it. Same trick .chat-composer
       already used locally. Needs no dark override. */
    --fp-bubble: rgba(var(--mud-palette-text-primary-rgb), 0.06);

    /* --- lines ---------------------------------------------------------- */
    --fp-line: var(--mud-palette-lines-default);
    --fp-line-strong: var(--mud-palette-lines-inputs);

    /* --- text ----------------------------------------------------------- */
    --fp-text: var(--mud-palette-text-primary);
    --fp-text-muted: var(--mud-palette-text-secondary);
    --fp-text-faint: var(--mud-palette-text-disabled);

    /* --- brand ----------------------------------------------------------
       Follows the compile-time build flavour automatically: the palette in
       Settings.cs supplies navy for General and coral for IPET, so nothing
       brand-specific needs to live in CSS. */
    --fp-brand: var(--mud-palette-primary);
    --fp-brand-contrast: var(--mud-palette-primary-text);
    --fp-brand-soft: rgba(var(--mud-palette-primary-rgb), 0.10);
    --fp-brand-softer: rgba(var(--mud-palette-primary-rgb), 0.05);

    /* --- status --------------------------------------------------------- */
    --fp-success: var(--mud-palette-success);
    --fp-success-soft: rgba(var(--mud-palette-success-rgb), 0.10);
    --fp-warning: var(--mud-palette-warning);
    --fp-warning-soft: rgba(var(--mud-palette-warning-rgb), 0.10);
    --fp-danger: var(--mud-palette-error);
    --fp-danger-soft: rgba(var(--mud-palette-error-rgb), 0.10);
    --fp-info: var(--mud-palette-info);

    /* --- geometry -------------------------------------------------------
       radius-sm tracks MudBlazor's own default so our surfaces and its
       buttons/papers agree without either side being overridden. */
    --fp-radius-xs: 6px;
    --fp-radius-sm: var(--mud-default-borderradius);
    --fp-radius-md: 12px;
    --fp-radius-lg: 16px;
    --fp-radius-pill: 999px;

    /* --- elevation ------------------------------------------------------
       Soft warm leans on depth rather than borders, but only just: one
       contact shadow for resting panels, a wider one for things that lift. */
    --fp-shadow-xs: 0 1px 2px rgba(28, 27, 25, 0.04);
    --fp-shadow-sm: 0 1px 3px rgba(28, 27, 25, 0.06), 0 1px 2px rgba(28, 27, 25, 0.04);
    --fp-shadow-md: 0 4px 16px rgba(28, 27, 25, 0.08);
    --fp-shadow-lg: 0 16px 40px rgba(28, 27, 25, 0.10);

    /* --- spacing --------------------------------------------------------- */
    --fp-space-1: 4px;
    --fp-space-2: 8px;
    --fp-space-3: 12px;
    --fp-space-4: 16px;
    --fp-space-5: 24px;
    --fp-space-6: 32px;
    --fp-space-7: 48px;

    /* --- motion ---------------------------------------------------------
       Replaces the twelve ad-hoc durations that were scattered across the
       inline <style> blocks (0.12s / 0.15s / 180ms / 0.2s / 0.3s). */
    --fp-dur-fast: 120ms;
    --fp-dur: 180ms;
    --fp-dur-slow: 280ms;
    --fp-ease: cubic-bezier(0.2, 0, 0.2, 1);

    /* --- component geometry ---------------------------------------------- */
    --fp-nav-icon: 20px;
    --fp-panel-pad: 12px;

    /* --- focus ------------------------------------------------------------ */
    --fp-focus-ring: 0 0 0 3px var(--fp-brand-soft);

    /* --- scrollbar -------------------------------------------------------- */
    --fp-scroll-thumb: #ddd8d0;
    --fp-scroll-track: transparent;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Warm-neutral dark rather than blue-grey, so the two themes read as the
       same product. Everything not listed here is an alias and has already
       followed the palette swap. */
    --fp-surface-sunken: #191817;
    --fp-surface-translucent: rgba(23, 22, 20, 0.82);

    /* A shadow tuned for a light canvas disappears on a dark one; these are
       deeper and rely on near-black rather than the warm ink used above. */
    --fp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --fp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --fp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50);
    --fp-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    --fp-scroll-thumb: #423f3a;
}