/* LifeRoc Capital — Effects: radii, borders, shadows, motion
   The brand reads MODERN + SHARP: minimal corner rounding, crisp 1px borders,
   soft neutral shadows on white cards, and angular section dividers.
   The app's corners don't use this radius scale; they come from the --lra-* radius tokens in tokens.css. */
:root {
  /* Corner radii — deliberately tight/sharp */
  --radius-none: 0;
  --radius-xs: 2px;   /* buttons, inputs */
  --radius-sm: 3px;   /* cards, chips */
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Border widths */
  --border-hairline: 1px;
  --border-thick: 2px;
  --border-accent: 3px;  /* blue underline under section numbers */

  /* Shadows — subtle, cool neutral */
  --shadow-xs: 0 1px 2px rgba(16,34,54,.06);
  --shadow-sm: 0 1px 4px rgba(16,34,54,.08);
  --shadow-md: 0 3px 12px rgba(16,34,54,.10);
  --shadow-lg: 0 10px 30px rgba(16,34,54,.14);
  --shadow-xl: 0 20px 48px rgba(16,34,54,.18);
  --shadow-card: 0 2px 14px rgba(16,34,54,.09);
  --shadow-cta: 0 4px 14px rgba(15,203,56,.30);   /* green glow on CTA */
  --shadow-focus: var(--focus-ring);

  /* Motion */
  --ease-standard: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --ease-in: cubic-bezier(.4, 0, 1, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-standard); /* @kind other */

  /* Angular divider clip-paths (the site's torn/faceted section edges) */
  --clip-slant-down: polygon(0 0, 100% 0, 100% 88%, 0 100%); /* @kind other */
  --clip-slant-up: polygon(0 12%, 100% 0, 100% 100%, 0 100%); /* @kind other */
  --clip-chevron: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); /* @kind other */
}