/* PNOĒ — Effects: shadows, blur, gradients, motion
   Soft, diffuse, premium. Shadows are low-contrast and cool-neutral; the brand
   leans on light surfaces and the red signal color rather than heavy chrome. */

:root {
  /* ---- elevation (soft, diffuse, never harsh) ---- */
  --shadow-xs: 0 1px 2px rgba(11, 11, 13, 0.06);
  --shadow-sm: 0 2px 8px rgba(11, 11, 13, 0.06), 0 1px 2px rgba(11, 11, 13, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 11, 13, 0.08), 0 2px 6px rgba(11, 11, 13, 0.04);
  --shadow-lg: 0 18px 50px rgba(11, 11, 13, 0.12), 0 4px 12px rgba(11, 11, 13, 0.06);
  --shadow-xl: 0 30px 80px rgba(11, 11, 13, 0.16);
  /* the soft "lifted card" used on the marketing site's feature cards */
  --shadow-card: 0 12px 40px rgba(28, 29, 34, 0.10);
  /* red glow for primary CTAs on hover */
  --shadow-brand: 0 8px 24px rgba(247, 33, 60, 0.28);

  /* ---- glass / blur (used sparingly: sticky nav, app sheets) ---- */
  --blur-sm: blur(8px); /* @kind other */
  --blur-md: blur(16px); /* @kind other */
  --glass-bg: color-mix(in oklab, var(--white) 72%, transparent); /* @kind color */
  --glass-border: color-mix(in oklab, var(--white) 50%, transparent); /* @kind color */

  /* ---- signature gradients ---- */
  /* hero: pale sky fading to white, like breath / morning air */
  --gradient-sky: linear-gradient(180deg, var(--sky-300) 0%, var(--sky-100) 55%, var(--white) 100%);
  /* calm section ground: lavender mist */
  --gradient-mist: linear-gradient(180deg, var(--mist-200) 0%, var(--mist-300) 100%);
  /* metric / fuel scale: fat (green) → carb (amber) → max (red) */
  --gradient-fuel: linear-gradient(90deg, var(--signal-fat) 0%, var(--signal-carb) 55%, var(--red-500) 100%);
  /* protection scrim over photography */
  --scrim-bottom: linear-gradient(180deg, transparent 0%, rgba(11,11,13,0.55) 100%); /* @kind color */

  /* ---- motion ----
     Quiet and confident: short fades + gentle ease. No bounce, no spring on
     editorial surfaces; app surfaces may use a soft ease-out for sheets. */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */
  --duration-slower: 600ms; /* @kind other */

  /* hover/press conventions (documented in readme) */
  --press-scale: 0.97; /* @kind other */      /* buttons shrink slightly on press */
  --hover-lift: -2px; /* @kind other */        /* cards/CTAs lift on hover */
}