/*
 * Metrics
 */

$gut-small: 8px; // max 480px width
$gut: 16px;
$column: 400px;

$area-width: $column * 3 + 32px;

/*
 * Fonts
 */

$system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
$body-font: 'Roboto', $system-font;
$heading-font: 'Roboto', $system-font;
$monospace-font: 'Fira Mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', monospace;

/*
 * Base colors
 */

$base-body: #f1f3f5;
$base-panel: white;
$base-head: #111;
$base-text: #345;
$base-mute: #667788; // gray

$base-a: #8370bd; // indigo
$base-b: #2b72a2; // blue
$base-c: #17c694; // teal

$base-b3: adjust-color($base-b, $lightness: 16%, $hue: -20deg);
$base-b7: adjust-color($base-b, $lightness: -16%, $hue: 20deg);
$base-mute7: adjust-color($base-mute, $lightness: -16%);
$base-mute6: adjust-color($base-mute, $lightness: -8%);
$base-mute4: adjust-color($base-mute, $lightness: 8%);
$base-mute3: adjust-color($base-mute, $lightness: 16%);

$body-bg: $base-body;
$gray-bg: mix($base-body, $base-panel, 50%);
$gray-text: $base-mute;

$line-color: rgba($base-mute, 0.05);
$dark-line-color: rgba($base-mute, 0.14);

//
// Shadows
//

$shadow2:
  0 1px 1px rgba($base-mute, 0.30);

$shadow3:
  0 6px 8px rgba($base-mute, 0.02),
  0 1px 2px rgba($base-mute, 0.20);

$shadow6:
  0 8px 12px rgba($base-b3, 0.1),
  0 2px 3px rgba($base-b, 0.18);

/*
 * Mod scale
 */

$modularscale: (
  base: 14px, ratio: 1.2,
  480px: (base: 13px, ratio: 1.15),
  768px: (base: 14px, ratio: 1.17),
  1280px: (base: 14px, ratio: 1.2)
);