/* Co Connect — Effects: gradients, shadows, motion, hexagon geometry
   The brand leans on teal→blue gradients, soft 3D drop shadows (on hexagons + cards),
   low-poly / connected-node texture, and white glass cards. */
:root {
  /* ---- Signature gradients ---- */
  --grad-brand:  linear-gradient(135deg, #11adc6 0%, #1b6ce3 55%, #1257c2 100%); /* @kind color */ /* teal→blue, the curve header */
  --grad-brand-soft: linear-gradient(135deg, #2ac6d9 0%, #2e8bf0 100%); /* @kind color */
  --grad-hex:    linear-gradient(165deg, #3a93d6 0%, #1e5fa8 100%); /* @kind color */              /* hexagon nav tile */
  --grad-hex-teal: linear-gradient(165deg, #2ac6d9 0%, #0a8fa8 100%); /* @kind color */
  --grad-navy:   linear-gradient(150deg, #04205a 0%, #0a3a8c 100%); /* @kind color */             /* deep panels */
  --grad-danger: linear-gradient(165deg, #e05653 0%, #b3332f 100%); /* @kind color */            /* SOS / alert hex */
  --grad-sky:    linear-gradient(180deg, #f2f8fe 0%, #e4f0fc 100%); /* @kind color */            /* light surface wash */
  --grad-screen: linear-gradient(180deg, #6f9fc4 0%, #cfe0ec 100%); /* @kind color */           /* app body backdrop */

  /* ---- Elevation (soft blue-tinted shadows) ---- */
  --shadow-xs: 0 1px 2px rgba(27,108,227,0.08);
  --shadow-sm: 0 2px 6px rgba(27,108,227,0.10);
  --shadow-md: 0 6px 18px rgba(27,108,227,0.14);
  --shadow-lg: 0 14px 36px rgba(27,108,227,0.18);
  --shadow-xl: 0 26px 60px rgba(27,108,227,0.24);
  /* 3D shape shadow used under hexagons / floating brand devices */
  --shadow-hex: 0 10px 22px rgba(27,108,227,0.32);
  --shadow-brand-glow: 0 12px 30px rgba(27,108,227,0.35);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* ---- Hexagon geometry (flat-top, the brand's orientation) ---- */
  --hex-clip: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); /* @kind other */
  --hex-clip-pointy: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* @kind other */
}