/* Swipix — gradients & glass. Values are the hex labels printed on each spec row.
   Direction: the file draws its swatches at 135deg; multi-stop labels ("70-10-90",
   "10 - 30") are white alphas in percent, in order. */
:root{
  /* Glass */
  --glass-stroke-light:linear-gradient(135deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.9) 100%); /* @kind color */
  --glass-stroke-light-opacity:0.4;
  --glass-stroke-dark:linear-gradient(135deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.9) 100%); /* @kind color */
  --glass-stroke-dark-opacity:0.4;
  /* The stroke ramps above are the raw spec stops; the layer carrying them is
     drawn at 40% in the file. A CSS gradient border can't take a layer opacity,
     so these pre-multiplied variants are what components actually paint. */
  --glass-stroke-dark-40:linear-gradient(135deg,rgba(255,255,255,0.28) 0%,rgba(255,255,255,0.04) 50%,rgba(255,255,255,0.36) 100%); /* @kind color */
  --glass-solid-light:rgba(255,255,255,0.05);
  --glass-solid-dark:rgba(255,255,255,0.10);
  --glass-linear-light:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 100%); /* @kind color */
  --glass-linear-light-v:linear-gradient(180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 100%); /* @kind color */
  --glass-linear-dark:linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.72) 100%); /* @kind color */
  --glass-primary:linear-gradient(135deg,rgba(2,169,175,0.7) 0%,rgba(2,169,175,0.3) 100%); /* @kind color */
  --glass-secondary:linear-gradient(135deg,rgba(255,0,140,0.7) 0%,rgba(255,0,140,0.3) 100%); /* @kind color */

  /* Unique gradients */
  --grad-primary:linear-gradient(135deg,#01E3EB 0%,#02A9AF 100%); /* @kind color */
  --grad-secondary:linear-gradient(135deg,#FD00E9 0%,#01E3EB 100%); /* @kind color */
  --grad-tertiary:linear-gradient(135deg,#01E3EB 0%,#FF008C 100%); /* @kind color */

  /* Common gradients */
  --grad-yellow:linear-gradient(135deg,#FFCA00 0%,#FFDF60 100%); /* @kind color */
  --grad-orange:linear-gradient(135deg,#FD00E9 0%,#FF8C00 100%); /* @kind color */
  --grad-pink:linear-gradient(135deg,#FF008C 0%,#FD00E9 100%); /* @kind color */
  --grad-lilac:linear-gradient(135deg,#9E0091 0%,#0095FF 100%); /* @kind color */
  --grad-purple:linear-gradient(135deg,#0095FF 0%,#8200E9 100%); /* @kind color */
  --grad-navy:linear-gradient(135deg,#6D34E6 0%,#00CDE9 100%); /* @kind color */
  --grad-teal:linear-gradient(135deg,#0095FF 0%,#01E3EB 100%); /* @kind color */
  --grad-pine:linear-gradient(135deg,#00BF59 0%,#01E3EB 100%); /* @kind color */
  --grad-gold:linear-gradient(135deg,#715F34 0%,#C4A14E 100%); /* @kind color */
  --grad-red:linear-gradient(135deg,#FF0000 0%,rgba(238,68,68,0.7) 100%); /* @kind color */
  --grad-mandarin:linear-gradient(135deg,#E3061A 0%,rgba(250,124,7,0.7) 100%); /* @kind color */
  --grad-green:linear-gradient(135deg,#2AC300 0%,rgba(0,255,94,0.7) 100%); /* @kind color */

  /* Stones — three stops each */
  --grad-lazurite:linear-gradient(135deg,#60BDFF 0%,#0095FF 50%,#005999 100%); /* @kind color */
  --grad-beryl:linear-gradient(135deg,#00D27A 0%,#01B6B9 50%,#018299 100%); /* @kind color */
  --grad-amethyst:linear-gradient(135deg,#A601FF 0%,#6F0FFF 50%,#3800BA 100%); /* @kind color */
  --grad-thulite:linear-gradient(135deg,#FFA100 0%,#FF006F 50%,#9500BA 100%); /* @kind color */
  --grad-morganite:linear-gradient(135deg,#FF9FF7 0%,#FD00E9 50%,#0095FF 100%); /* @kind color */

  /* Socials — reward cards */
  --grad-tiktok:linear-gradient(135deg,#E70000 0%,#EE4F6C 100%); /* @kind color */
  --grad-instagram:linear-gradient(139.366deg,#7638FA 3.28%,#D300C5 28.97%,#FF0069 51.87%,#FF7A00 72.89%,#FFD600 96.72%); /* @kind color */
}