:root {
  /* Brand */
  --lo-color-primary-50:  #e8f5f4;
  --lo-color-primary-100: #c6e8e5;
  --lo-color-primary-200: #a3dbd6;
  --lo-color-primary-300: #7fcfc7;
  --lo-color-primary-400: #5dc2b8;
  --lo-color-primary-500: #3ab6a8;
  --lo-color-primary-600: #2c8e82;
  --lo-color-primary-700: #20685e;
  --lo-color-primary-800: #14423b;
  --lo-color-primary-900: #091c19;

  /* Accent */
  --lo-color-accent-100: #fde8d9;
  --lo-color-accent-200: #f9c5a3;
  --lo-color-accent-300: #f49f6a;
  --lo-color-accent-400: #ef7a33;
  --lo-color-accent-500: #eb5a00;

  /* Neutrals */
  --lo-gray-50:  #f9fafb;
  --lo-gray-100: #f1f3f4;
  --lo-gray-200: #e2e6e9;
  --lo-gray-300: #cdd2d6;
  --lo-gray-400: #aeb5ba;
  --lo-gray-500: #8c959b;
  --lo-gray-600: #6a7379;
  --lo-gray-700: #4d555a;
  --lo-gray-800: #313639;
  --lo-gray-900: #171a1c;

  /* Semantics */
  --lo-success-50:  #e6f6ed;
  --lo-success-500: #2ea36d;
  --lo-warning-50:  #fff8e6;
  --lo-warning-500: #e9a100;
  --lo-danger-50:   #fdecec;
  --lo-danger-500:  #cf3e3e;

  /* Background elevations */
  --lo-bg-0:  var(--lo-gray-50);
  --lo-bg-1:  #ffffff;
  --lo-bg-2:  #f9fafb;
  --lo-bg-3:  #f5f6f7;
  --lo-bg-4:  #eef0f2;

  /* Borders & Radius */
  --lo-border-color:         var(--lo-gray-300);
  --lo-border-hover-color:   var(--lo-gray-400);
  --lo-border-width:         1px;
  --lo-radius-sm:            4px;
  --lo-radius-md:            8px;
  --lo-radius-lg:            12px;

  /* Typography */
  --lo-font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --lo-font-size-xs:   11px;
  --lo-font-size-sm:   13px;
  --lo-font-size-md:   15px;
  --lo-font-size-lg:   17px;
  --lo-font-size-xl:   20px;
  --lo-font-size-2xl:  24px;

  --lo-line-tight:   1.2;
  --lo-line-normal:  1.45;
  --lo-line-relaxed: 1.6;

  --lo-weight-regular:   400;
  --lo-weight-medium:    500;
  --lo-weight-semibold:  600;
  --lo-weight-bold:      700;

  /* Spacing */
  --lo-space-0:   0;
  --lo-space-1:   4px;
  --lo-space-2:   8px;
  --lo-space-3:   12px;
  --lo-space-4:   16px;
  --lo-space-5:   20px;
  --lo-space-6:   24px;
  --lo-space-8:   32px;
  --lo-space-10:  40px;
  --lo-space-12:  48px;

  /* Motion */
  --lo-motion-fast:   120ms;
  --lo-motion-medium: 180ms;
  --lo-motion-slow:   250ms;

  --lo-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --lo-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --lo-ease-out:      cubic-bezier(0.2, 0, 0, 1);
}