/* ==========================================================================
   Niveus — Materials
   --------------------------------------------------------------------------
   A material is a surface treatment: what it is made of, not where it sits.
   Elevation answers "how far from the canvas"; material answers "what does
   light do when it hits this".

     solid      opaque, stable. The default. Content lives here.
     elevated   solid with depth and a top highlight. Separated from context.
     inset      recessed into its parent. Fields, wells, tracks.
     frosted    translucent, moderately blurred, bevelled. Chrome that sits
                over content: bars, docks, launchers, notifications, menus.
     glass      more translucent, lightly blurred. Contextual layers where the
                content behind should stay legible: overlays, hover cards.
     glaze     glass with a dial. How frosted it is belongs to whoever is
                looking at it, so it is one number (--nv-glass-frost) rather
                than a fixed recipe, and it carries a rim that catches the
                light and follows the pointer.

   Niveus is a solid system with glass used sparingly. Windows, cards, dialogs
   and everything that holds content are solid; translucency is reserved for
   the chrome that floats over them. Translucency has a cost — it tints
   whatever is behind it and forces the GPU to composite — and used everywhere
   it stops meaning "this floats".

   Sheen is the light falling across a raised face. It is laid over a
   surface's own color as background-image, so a surface keeps its role color
   and gains the gradient; anything that does not draw gradients simply shows
   the role color.
   ========================================================================== */

:root {
  /* --- Blur ---------------------------------------------------------------- */
  --nv-blur-sm: 12px;
  --nv-blur-md: 24px;
  --nv-blur-lg: 36px;
  --nv-blur-xl: 56px;

  /* Backdrops lose saturation when blurred; a touch of saturate() puts the
     color back so frosted surfaces do not read as gray films. Moderate on
     purpose: the blur says "this floats", it is not the look itself. */
  --nv-backdrop-saturate: 180%;
  --nv-backdrop-frosted: blur(var(--nv-blur-md)) saturate(var(--nv-backdrop-saturate));
  --nv-backdrop-glass: blur(var(--nv-blur-sm)) saturate(var(--nv-backdrop-saturate));

  /* --- Frost ------------------------------------------------------------------
     The one input the glaze material derives from: 0 is clear glass, 1 is
     nearly opaque frost. Set it on :root for the whole site, on a subtree to
     change just that region, or bind a slider to it with data-nv-var and let
     the person looking choose. The glaze recipe reads it where it is used,
     so a subtree override always reaches the surfaces inside it. */
  --nv-glass-frost: 0.5;
  --nv-glaze-blur-max: 56px;   /* blur at frost 1 */
  --nv-glaze-tint-min: 4%;     /* tint opacity at frost 0 */
  --nv-glaze-tint-max: 78%;    /* tint opacity at frost 1 */
  --nv-glaze-rim: 1.5px;

  /* --- Sheen ------------------------------------------------------------------
     raised    neutral controls: buttons, the selected tab, a titlebar
     filled    saturated fills: primary and danger buttons, checked marks
     surface   large surfaces: windows, dialogs, cards. Brightest along the
               top edge, easing through the middle and settling into a faint
               shade at the foot, so a panel reads as a curved, lit body
               rather than as a flat sheet.
     knob      a round thumb: lit from above, shaded towards its rim */
  --nv-sheen-raised: linear-gradient(var(--nv-color-sheen-top), var(--nv-color-sheen-bottom));
  --nv-sheen-filled: linear-gradient(var(--nv-color-sheen-strong-top), var(--nv-color-sheen-strong-bottom));
  --nv-sheen-surface: linear-gradient(var(--nv-color-sheen-top), transparent 7rem, transparent 55%, var(--nv-color-sheen-bottom));
  --nv-sheen-knob: radial-gradient(circle at 50% 22%, var(--nv-color-highlight-strong), transparent 45%), radial-gradient(circle at 50% 30%, transparent 40%, var(--nv-color-knob-shade));
  --nv-backdrop-scrim: blur(var(--nv-blur-sm)) saturate(140%);

  /* --- Material recipes -----------------------------------------------------
     Each recipe is the full set of properties that defines the material.
     Applied by the .nv-material-* classes in components/surface.css. */
  --nv-material-solid-bg: var(--nv-color-surface);
  --nv-material-solid-border: var(--nv-color-border);
  --nv-material-solid-shadow: var(--nv-elevation-0);

  --nv-material-elevated-bg: var(--nv-color-surface-elevated);
  --nv-material-elevated-border: var(--nv-color-border-subtle);
  --nv-material-elevated-shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-2);

  --nv-material-inset-bg: var(--nv-color-surface-inset);
  --nv-material-inset-border: var(--nv-color-border-subtle);
  --nv-material-inset-shadow: var(--nv-elevation-inset-md), var(--nv-ledge);

  --nv-material-frosted-bg: var(--nv-color-material-frosted);
  --nv-material-frosted-border: var(--nv-color-material-border);
  --nv-material-frosted-shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-3);

  --nv-material-glass-bg: var(--nv-color-material-glass);
  --nv-material-glass-border: var(--nv-color-material-border);
  --nv-material-glass-shadow: var(--nv-highlight-top-strong), var(--nv-outline), var(--nv-elevation-4);
}

/* Where translucency cannot be honoured — reduced transparency, or a browser
   without backdrop-filter — materials fall back to their solid equivalents
   rather than becoming unreadable washes. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --nv-material-frosted-bg: var(--nv-color-surface-elevated);
    --nv-material-glass-bg: var(--nv-color-surface-elevated);
    --nv-backdrop-frosted: none;
    --nv-backdrop-glass: none;
    --nv-backdrop-scrim: none;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  :root {
    --nv-material-frosted-bg: var(--nv-color-surface-elevated);
    --nv-material-glass-bg: var(--nv-color-surface-elevated);
  }
}