/* ============================================================
   ControlSolar — EFFECTS: radii, shadows, motion, blur
   Soft, warm, low-contrast shadows. Rounded but not pill-everywhere.
   ============================================================ */
:root {
  /* --- Corner radii --- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;   /* inputs, small cards */
  --radius-lg:   20px;   /* default card */
  --radius-xl:   28px;   /* hero panels, photo frames */
  --radius-2xl:  36px;
  --radius-pill: 999px;  /* chips, tags, round buttons */

  /* --- Shadows: warm-tinted, soft, never harsh black ---
     tint = teal/ink mixed warm so shadows sit on the canvas naturally */
  --shadow-xs:   0 1px 2px rgba(22, 20, 19, 0.05);
  --shadow-sm:   0 2px 6px rgba(22, 20, 19, 0.06);
  --shadow-md:   0 6px 18px rgba(22, 20, 19, 0.07), 0 1px 3px rgba(22, 20, 19, 0.05);
  --shadow-lg:   0 16px 40px rgba(22, 20, 19, 0.10), 0 3px 8px rgba(22, 20, 19, 0.05);
  --shadow-xl:   0 28px 70px rgba(22, 20, 19, 0.14), 0 6px 14px rgba(22, 20, 19, 0.06);
  --shadow-card-hover: 0 20px 48px rgba(22, 20, 19, 0.13), 0 4px 10px rgba(22, 20, 19, 0.06);

  /* Amber glow — reserve for the single hero CTA / focus accents */
  --shadow-amber: 0 10px 28px rgba(255, 158, 44, 0.30);

  /* Inner light edge for photo frames (top sheen, like sun) */
  --inset-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* --- Borders --- */
  --border-w:        1px;   /* @kind spacing */
  --border-hairline-rule: 1px solid var(--border-hairline);

  /* --- Motion ---
     Calm, contained. Brand easing = gentle ease-out, no bounce on UI. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --dur-fast:    140ms;   /* @kind other */
  --dur-base:    240ms;   /* @kind other */
  --dur-slow:    420ms;   /* @kind other */
  --dur-reveal:  640ms;   /* @kind other */

  /* --- Blur / glass (used sparingly: sticky header, mobile CTA) --- */
  --blur-sm:  8px;    /* @kind other */
  --blur-md:  16px;   /* @kind other */
  --glass-bg: rgba(246, 243, 238, 0.78);   /* @kind other */
  --glass-bg-shade: rgba(15, 61, 62, 0.72); /* @kind other */

  /* --- Z layers --- */
  --z-header:    100;   /* @kind other */
  --z-sticky:    200;   /* @kind other */
  --z-overlay:   900;   /* @kind other */
  --z-modal:     1000;  /* @kind other */
  --z-toast:     1100;  /* @kind other */
}

/* Respect reduced motion globally for consumers */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;   /* @kind other */
    --dur-base: 0ms;   /* @kind other */
    --dur-slow: 0ms;   /* @kind other */
    --dur-reveal: 0ms; /* @kind other */
  }
}