/* SnowGroup — Spacing, radius, shadow, motion, layout tokens.
   The brand vibe is infrastructure precision: crisp edges, hexagonal geometry,
   confident spacing. Radii are modest; the snowflake/hex mark carries the
   angular personality, so UI stays clean. */

:root {
  /* ---------- Spacing (4px base grid) ---------- */
  --sg-space-0: 0;
  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-5: 20px;
  --sg-space-6: 24px;
  --sg-space-8: 32px;
  --sg-space-10: 40px;
  --sg-space-12: 48px;
  --sg-space-16: 64px;
  --sg-space-20: 80px;
  --sg-space-24: 96px;
  --sg-space-32: 128px;

  /* ---------- Radius (modest; the geometry lives in the marks, not the corners) ---------- */
  --sg-radius-none: 0;
  --sg-radius-sm:   4px;
  --sg-radius-md:   8px;
  --sg-radius-lg:   12px;
  --sg-radius-xl:   16px;
  --sg-radius-2xl:  24px;
  --sg-radius-pill: 999px;

  /* ---------- Border widths ---------- */
  --sg-border-width:      1px;
  --sg-border-width-thick: 2px;

  /* ---------- Shadows (cool-tinted, low spread — snow-lit, not heavy) ---------- */
  --sg-shadow-xs: 0 1px 2px rgba(17, 20, 23, 0.06);
  --sg-shadow-sm: 0 1px 3px rgba(17, 20, 23, 0.08), 0 1px 2px rgba(17, 20, 23, 0.04);
  --sg-shadow-md: 0 4px 12px rgba(17, 20, 23, 0.10);
  --sg-shadow-lg: 0 12px 28px rgba(17, 20, 23, 0.14);
  --sg-shadow-xl: 0 24px 48px rgba(17, 20, 23, 0.18);
  --sg-shadow-brand: 0 8px 20px rgba(252, 80, 14, 0.28); /* orange glow for primary CTAs */

  /* ---------- Motion (snappy, confident — infrastructure, not bouncy) ---------- */
  --sg-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --sg-ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --sg-ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --sg-duration-fast:   120ms; /* @kind other */
  --sg-duration-normal: 200ms; /* @kind other */
  --sg-duration-slow:   320ms; /* @kind other */

  /* ---------- Layout ---------- */
  --sg-container:      1200px;
  --sg-container-wide: 1400px;
  --sg-gutter:         var(--sg-space-6);
  --sg-header-height:  72px;

  /* ---------- Focus ring ---------- */
  --sg-focus-ring: 0 0 0 3px rgba(37, 71, 165, 0.35);
}