/* SEMAI — Effects: radii, borders, shadows, gradients, blur
   The look: thin hairlines over deep graphite, soft violet glow used as
   signal not decoration, subtle top-edge highlights on raised surfaces. */

:root {
  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;    /* default control/card radius */
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hair: 1px;   /* @kind spacing */

  /* ---- Elevation shadows (deep, diffuse — dark UI) ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.66);

  /* Inner top highlight for raised surfaces (1px light edge) */
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);   /* @kind shadow */

  /* ---- Accent glow (violet signal — brand palette) ---- */
  --glow-sm: 0 0 0 1px rgba(107, 45, 217, 0.40), 0 6px 24px rgba(107, 45, 217, 0.24);   /* @kind shadow */
  --glow-md: 0 0 30px rgba(139, 63, 212, 0.32);   /* @kind shadow */
  --glow-lg: 0 0 60px rgba(139, 63, 212, 0.36);   /* @kind shadow */
  --glow-ring: 0 0 0 4px rgba(107, 45, 217, 0.18);   /* @kind shadow */

  /* ---- Focus ring ---- */
  --ring-focus: 0 0 0 3px var(--focus-ring);   /* @kind shadow */

  /* ---- Gradients ---- */
  /* Subtle surface sheen (top-lit panel) */
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%);   /* @kind color */
  /* Signature violet gradients — BRAND: 25deg, official hexes only.
     AI gradient = 2-stop (#6B2DD9 -> #AB65D6); sygnet gradient = 3-stop.
     Never wash long text; never add new hues; never one gradient across all. */
  --grad-ai: linear-gradient(25deg, #6B2DD9 0%, #AB65D6 100%);   /* @kind color */
  --grad-sygnet: linear-gradient(25deg, #6B2DD9 0%, #AB65D6 50%, #D1A6FF 100%);   /* @kind color */
  --grad-violet: var(--grad-sygnet);   /* @kind color */
  --grad-violet-soft: linear-gradient(25deg, rgba(107,45,217,0.20), rgba(209,166,255,0.10));   /* @kind color */
  /* Radial spotlight behind hero content */
  --grad-spotlight: radial-gradient(60% 60% at 50% 0%, rgba(107,45,217,0.22), rgba(107,45,217,0) 70%);   /* @kind color */
  /* Fade-to-base protection gradient (for image/section edges) */
  --grad-fade-base: linear-gradient(180deg, rgba(8,8,11,0), var(--graphite-950));   /* @kind color */
  /* Grid line mesh (thin-line motif) — use as background-image */
  --grid-mesh: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
               linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);   /* @kind color */
  --grid-mesh-size: 40px 40px;   /* @kind spacing */

  /* ---- Blur (glass) ---- */
  --blur-panel: saturate(140%) blur(14px);   /* @kind other */
  --blur-strong: saturate(160%) blur(24px);   /* @kind other */
}