/* ============================================================
   V-Choux radii, shadows, motion, textures
   ============================================================ */
:root{
  /* --- radii --- */
  --radius:1rem;                   /* 16px, the Tailwind --radius */
  --radius-sm:calc(var(--radius) - 4px);
  --radius-md:calc(var(--radius) - 2px);
  --radius-lg:var(--radius);
  --radius-card:35px;              /* the Hub dashboard cards, literal 35px */
  --radius-panel:22px;             /* Academy concept panel */
  --radius-tile:16px;              /* Academy tiles, avatar bubble */
  --radius-slide-card:32px;        /* deck cards */
  --radius-pill:999px;

  /* --- shadows --- */
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.15);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.2),0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.25),0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.3),0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-glow:0 0 20px hsl(0 0% 100% / 0.1);      /* recolored per accent theme */
  --shadow-panel:0 20px 50px -20px rgba(0,0,0,0.5); /* Academy panel */
  --shadow-bubble:0 8px 24px -8px rgba(0,0,0,0.5);  /* speech bubble, avatar ring */
  --shadow-menu:0 12px 30px -10px rgba(0,0,0,0.6);  /* dropdown */

  /* --- motion --- */
  --ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --transition-all:all 0.3s cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --transition-colors:color 0.3s cubic-bezier(0.4,0,0.2,1),background-color 0.3s cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --duration-fast:150ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:300ms; /* @kind other */
  --duration-slower:500ms; /* @kind other */
  --lift-hover:-2px; /* @kind other */   /* hover:-translate-y-0.5 on filled buttons */

  /* --- borders --- */
  --border-width:1px; /* @kind other */
  --border-hairline:1px solid rgba(255,255,255,0.14); /* @kind other */ /* deck cards */

  /* --- brand textures --- */
  --dot-grid-color:rgba(255,255,255,0.35); /* @kind other */
  --dot-grid:radial-gradient(var(--dot-grid-color) 1px,transparent 1px); /* @kind other */
  --dot-grid-size:24px 24px; /* @kind other */
  --texture-graph:url('../img/graph-1.png'); /* @kind other */ /* full-bleed section wash */
}