/* ============================================================
   HardByte — Effects: shadows, glows, blurs, motion, gradients
   Light UI uses soft cool-tinted shadows. The dark UI leans on
   borders + subtle glow rather than drop shadow.

   THIS FILE DOES NOT AUTO-THEME, with one exception. colors.css carries a
   [data-theme="dark"] block, so var(--surface-card) is correct in either theme
   without you doing anything. Shadows have no such block on purpose: the dark
   UI uses elevation differently rather than merely darker, so the dark values
   are separate NAMES, not overrides.

       light surface  ->  var(--shadow-md)
       dark surface   ->  var(--shadow-dark-md)

   Writing var(--shadow-md) on a dark surface is not an error and will not warn -
   it will just quietly apply the light shadow. The exception is --focus-outline,
   which has a dark value of its own (the block at the end of this file).
   ============================================================ */

:root,
[data-theme="light"] {
  /* Elevation (light) — cool slate-tinted, never pure black */
  --shadow-xs: 0 1px 2px rgba(18,25,34,0.06);
  --shadow-sm: 0 1px 3px rgba(18,25,34,0.08), 0 1px 2px rgba(18,25,34,0.04);
  --shadow-md: 0 4px 12px rgba(18,25,34,0.08), 0 2px 4px rgba(18,25,34,0.05);
  --shadow-lg: 0 12px 32px rgba(18,25,34,0.12), 0 4px 8px rgba(18,25,34,0.06);
  --shadow-xl: 0 24px 56px rgba(18,25,34,0.16);

  /* Elevation (dark) — depth via deeper black + thin top light */
  --shadow-dark-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-dark-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-dark-lg: 0 24px 60px rgba(0,0,0,0.55);
  /* A dialog over a scrim: the website's modal panel shadow. */
  --shadow-dark-xl: 0 40px 100px rgba(0,0,0,0.6);

  /* Under a filled action on hover — the website's call-to-action glow, the one
     recipe its three primary buttons share. */
  --glow-action: 0 6px 16px rgba(67,137,184,0.34);

  /* Focus ring (blue accent) */
  --ring: 0 0 0 3px rgba(67,137,184,0.32);
  --ring-danger: 0 0 0 3px rgba(203,49,55,0.26);
  /* Focus OUTLINE — the same decision as --ring, expressed as an outline rather than a box-shadow.
     Controls that sit flush in a scroll container or over photography need an outline (it does not
     participate in layout and is not clipped by overflow), so --ring alone could not serve them. It
     themes, the one token in this file that does (the dark value is in the block at the end):
     blue-500 on light (3.8:1 on white) — a blue-400 outline on white was 2.5:1, under the 3:1 a
     state indicator needs — and blue-400 on dark (8.3:1 on black). The offset stays local: it is a
     per-control spacing decision (2px on most, 3–4px where a rounded corner needs air), not part of
     the ring itself. */
  --focus-outline: 2px solid var(--hb-blue-500);

  /* Glass: menus, floating windows and bars over content. Opaque under
     prefers-reduced-transparency, and on a kiosk by default. */
  --blur-panel: blur(14px) saturate(120%);  /* @kind other */

  /* Signature spectral gradient (the three mark squares). ONE gradient: the
     signature line under a top bar, the top edge of a featured card, the label
     tick. Never on a selection - the current page, tab or item is blue - and
     never behind text. */
  --gradient-spectral: linear-gradient(115deg, #CB3137 0%, #7A6E2A 36%, #4E9450 64%, #4389B8 100%);  /* @kind color */
  /* How thick the spectral line is drawn: 3px as an edge (under a bar, over a card),
     2px as the tick before a label. One gradient, two thicknesses, nothing between. */
  --spectral-edge: 3px;  /* @kind other */
  --spectral-tick: 2px;  /* @kind other */

  /* Motion — quick, mechanical, precise. No bounce. */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);   /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);           /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 180ms;   /* @kind other */
  --dur-slow: 280ms;   /* @kind other */
}

/* Redeclared here, after :root, rather than in colors.css: a custom property
   that reads another is resolved where it is declared, so a dark subtree would
   otherwise inherit the light value — and on <html data-theme="dark"> this block
   has to come later in the cascade than :root to win. */
[data-theme="dark"] {
  --focus-outline: 2px solid var(--hb-blue-400);
}