:root {
  /* Canvas */
  --bg:       hsl(220 12% 8%);
  --surface:  hsl(220 10% 12%);
  --surface2: hsl(220 9% 16%);
  --muted:    hsl(220 8% 22%);

  /* Text */
  --text:     hsl(220 5% 88%);
  --dim:      hsl(220 5% 45%);
  --dimmer:   hsl(220 5% 30%);

  /* Accent — emerald, bukan blue/indigo */
  --accent:   hsl(158 64% 52%);
  --accent-dim: hsl(158 64% 20%);
  --danger:   hsl(0 72% 51%);
  --warn:     hsl(38 92% 50%);

  /* Type scale — ratio 1.25 */
  --t-xs:  0.694rem;
  --t-sm:  0.833rem;
  --t-md:  1rem;
  --t-lg:  1.25rem;
  --t-xl:  1.563rem;
  --t-2xl: 1.953rem;

  /* Spacing — 8pt grid */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;

  /* Radius — intentional scale, not rounded-2xl everywhere */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
  --t-fast:   80ms;
  --t-mid:    180ms;
  --t-slow:   300ms;

  /* Sidebar */
  --sidebar-w: 288px;
}