// Grid
@grid: 4px;
@gutter-width: @grid * 10;
@interaction-height: @grid * 11;

// Field
@field-gutter: @grid * 4;

// Typography
@typography-family: Helvetica, arial, sans-serif;
@text-large: normal 16px/1.3em @typography-family;
@text-standard: normal 14px @typography-family;
@text-small: normal 12px @typography-family;
@text-xsmall: normal 10px @typography-family;
@text-neutral: @gray-4;

// Weight
@bold: 700;
@weak: 100;

// Palette
@blue-1: #0088ff;
@blue-2: #005ad2;
@blue-3: #00439c;
@blue-4: #040080;
@green-1: #c5f5e9;
@green-2: #1da584;
@red-1: #fed6e1;
@red-2: #e52b50;
@white: #fff;
@gray-1: #f4f4f4;
@gray-2: #e8e8e8;
@gray-3: #a7a7a7;
@gray-4: #515151;
@gray-5: #1e1e1e;
@black: #000;

// Tones
@positive-light: @green-1;
@positive: @green-2;
@critical-light: @red-1;
@critical: @red-2;
@neutral: @gray-2;

// Highlights
@highlight: @blue-2;
@selection: fade(@blue-2, 10%);

// Box Shadow:
@shadow-small: 0 2px 8px rgba(18, 21, 26, 0.3);
@focus-outline: 0 0 0 5px rgba(@highlight, 0.15);

// Border radii
@radius-small: 2px;
@radius-medium: 4px;
@radius-large: 6px;

// Transitions
@transition-speed-fast: 100ms;
@transition-speed-medium: 200ms;
@transition-speed-slow: 300ms;
@transition-fast: opacity @transition-speed-fast ease,
  transform @transition-speed-fast ease;
@transition-medium: opacity @transition-speed-medium ease,
  transform @transition-speed-medium ease;
@transition-slow: opacity @transition-speed-slow ease,
  transform @transition-speed-slow ease;

// Playroom
@body: @gray-1;

// Preview
@preview-padding: @gutter-width;
@preview-inactive-label-opacity: 0.3;

// Code Editor
@code-background: @white;
@code-font-family: Source Code Pro, Firacode, Hasklig, Menlo, monospace;
@code-gutter-size: @gutter-width;
@code-marker-size: @grid * 3;
@code-marker-color: @highlight;
@code-format-tag: @blue-4;
@code-format-attribute: @blue-2;
@code-format-string: @blue-3;
@code-format-atom: @blue-3;
@code-format-variable: @blue-1;
@code-hint-bg: @blue-1;
@code-hint-fg: @white;
@code-selection: @selection;

// Toolbar
@toolbar-closed-size: 60px;
@toolbar-open-size: 300px;
@toolbar-item-size: 60px;
@toolbar-max-item-count: 5;
@toolbar-foregound: @text-neutral;
@toolbar-background: @white;
@toolbar-highlight: @highlight;
@toolbar-border-color: @gray-2;
@toolbar-border-thickness: 1px;

// Snippets
@snippet-background: @toolbar-background;
@snippet-foreground: @toolbar-foregound;
@snippet-highlight: @toolbar-highlight;
@snippet-selection: @selection;
@snippet-gutter: @grid * 2;