/* =========================================
   DESIGN TOKENS — variables.css
   ========================================= */

:root {

  /* BACKGROUND */
  --bg:              #f5f5f3;
  --bg-elevated:     #ffffff;
  --bg-surface:      rgba(255,255,255,0.72);

  /* TEXT */
  --text-primary:    #0f0f0f;
  --text-secondary:  #444444;
  --text-muted:      #888888;

  /* ACCENT */
  --blue:            #1a46c9;
  --blue-light:      #2453d4;
  --blue-muted:      rgba(26,70,201,0.12);

  /* BORDER */
  --border:          rgba(0,0,0,0.07);
  --border-hover:    rgba(0,0,0,0.14);

  /* GRID */
  --grid-color:      rgba(0,0,0,0.045);

  /* SPACING SCALE */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 144px;

  /* RADIUS */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* TYPE */
  --font-primary: "Inter", sans-serif;

  /* TRANSITIONS */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:      180ms;
  --t-base:      320ms;
  --t-slow:      600ms;

  /* SHADOW */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.06);

}