/* ============================================
   TOKENS - design variables (colors, type, geometry, shadows)
   Loaded first; everything else reads from :root.
   ============================================ */

:root {
  /* Brand */
  --primary:        #5B7CFF;
  --primary-dim:    #3144B7;
  --primary-soft:   #A9B8FF;
  --secondary:      #18B8A6;
  --tertiary:       #FF7A90;
  --positive:       #22A866;
  --positive-bright:#5AE09B;
  --warning:        #F59E0B;
  --gold:           #F6C85F;
  --amber:          #F59E0B;
  --ink-on-gold:    #211505;

  /* Tag colors */
  --tag-trip: #F6C85F;
  --tag-tech: #7DE3D3;

  /* Surfaces (dark canvas) */
  --bg-0: #080A14;
  --bg-1: #0D1020;
  --bg-2: #12182D;
  --bg-3: #0D2630;

  --ink:        #ffffff;
  --ink-soft:   rgba(255,255,255,0.78);
  --ink-mute:   rgba(255,255,255,0.55);
  --ink-faint:  rgba(255,255,255,0.32);
  --hairline:   rgba(255,255,255,0.09);
  --hairline-2: rgba(255,255,255,0.16);

  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Geometry */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-xl: 8px;
  --r-pill: 999px;

  /* Shadows */
  --glow-card:    0 18px 38px -30px rgba(0,0,0,0.72),
                   0 1px 0 rgba(255,255,255,0.05) inset;
  --glow-soft:    0 18px 44px -34px rgba(91,124,255,0.34);
  --glow-gold:    0 18px 42px -34px rgba(246,200,95,0.40);

  --maxw: 1240px;
}