/* ==========================================================================
   EFFECTS — radii, borders, shadows — Canon Website OS
   ==========================================================================
   Ground truth: the OS specifies no radii or shadow system explicitly. This
   dark, near-black surface takes its definition mostly from a 1px border
   (see --border-default in colors.css) rather than heavy drop shadows —
   shadows read poorly on near-black backgrounds, so they're kept subtle and
   reserved for real elevation (modals, popovers) plus a soft brand "glow"
   used sparingly on the primary CTA.
   ========================================================================== */

:root {
  /* ---- radii ---- */
  --radius-sm:    6px;   /* inputs, small chips */
  --radius-md:    10px;  /* buttons, cards */
  --radius-lg:    16px;  /* large panels, price cards */
  --radius-xl:    24px;  /* hero media, modals */
  --radius-full:  999px; /* pills/badges, phone CTA button */

  /* ---- borders ---- */
  --border-width:        1px;
  --border-width-thick:  2px;

  /* ---- shadows (elevation) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

  /* ---- focus + brand glow ---- */
  --shadow-focus-ring:    0 0 0 3px var(--focus-ring-color);
  --shadow-glow-primary: 0 0 0 1px var(--action-primary), 0 0 24px var(--glow-primary);
  --shadow-glow-accent:  0 0 0 1px var(--action-accent), 0 0 24px var(--glow-accent);

  /* ---- background texture ----
     No photography or illustration is defined by the source. The one
     approved decorative background is a faint dot-grid, used behind hero
     sections only — never a gradient mesh or photo. */
  --bg-dot-grid: radial-gradient(circle, var(--gray-700) 1px, transparent 1px);
  --bg-dot-grid-size: 24px 24px;
}