/* COLORS
 * base.paper and base.text are the very basic colors
 * base.fill and primary.fill are used for backgrounds which change by state
 * base.line and primary.line are use for text and borders which change by state
 * line and fill must have a high contrast
 * primary.fill and pirmary.line must have the same hue but differentiate in saturation
 * and/or brightness to align visual perception
 * primary line must have a high contrast to to base fill
 * primary fillContrast could be set if the contrast between primary fill and base line is not sufficient
 * color[0] is used as default (stateless)
 * color[1] is used for hover state
 * color[2] is used for active state
*/

const colors = {
  base: {
    fill: [
      '#EEEEEE', // Grey 200
      '#E0E0E0', // Grey 300
      '#BDBDBD' // Grey 400
    ],
    line: [
      '#616161', // Grey 700
      '#424242', // Grey 800
      '#212121' // Grey 900
    ],
    paper: '#FAFAFA', // Grey 50
    text: '#212121' // Grey 900
  },
  primary: {
    fill: [
      '#FF9800', // Orange 500
      '#FB8C00', // Orange 600
      '#F57C00' // Orange 700
    ],
    line: [
      '#F57C00', // Orange 700
      '#EF6C00', // Orange 800
      '#E65100' // Orange 900
    ]
  }
}

/* FONT SIZES
 * scale is augmented fourth (1.414)
 */
const fontSizes = [
  '.5rem', '.707rem', '1rem', '1.414rem', '1.999rem', '2.827rem', '3.998rem'
]

const fontWeights = {
  light: 300,
  regular: 400,
  bold: 700
}

/* LINE HEIGHT
   lineHeights[0] = dense mode
   lineHeights[1] = normal mode
 */
const lineHeights = [
  1,
  1.4
]

const opacities = {
  disabled: 0.4
}

const outline = 'none'

const radii = [
  0, '2px', '4px', '8px', '16px'
]

const shadows = {
  levels: [
    'none',
    '0 1px 1px 1px',
    '0 2px 2px 2px'
  ],
  color: 'rgba(33, 33, 33, .6)'
}

/* SPACE
 * space is used for margin and padding scales
 * it's recommended to use powers of two to ensure alignment
 * space[0] = 0px
 * space[1] = 1px
 * space[2] = 2px
 * space[3] = 4px
 * space[4] = 8px
 * space[5] = 16px
 * space[6] = 32px
 * space[7] = 64px
 * space[8] = 128px
 * space[9] = 256px
 * space[10] = 512px
 */
const space = [
  0, '.0625rem', '.125rem', '.25rem', '.5rem', '1rem', '2rem', '4rem', '8rem', '16rem', '32rem'
]

const defaultTheme = {
  colors,
  fontSizes,
  fontWeights,
  lineHeights,
  opacities,
  outline,
  radii,
  shadows,
  space
}

export default defaultTheme

@@ -834,14 +834,14 @@
   '#
-616161
+424242
 ', /
@@ -847,17 +847,17 @@
 // Grey 
-7
+8
 00%0A     
@@ -851,38 +851,38 @@
 rey 800%0A      '#
-424242
+303030
 ', // Grey 800%0A 
@@ -869,33 +869,33 @@
 3030', // Grey 8
-0
+5
 0%0A      '#212121
@@ -933,26 +933,15 @@
  '#F
-AFAFA', // Grey 50
+FFFFF',
 %0A   
@@ -1011,107 +1011,272 @@
   '#
-FF9800', // Orange 500%0A      '#FB8C00', // Orange 600%0A      '#F57C00' // Orange 700%0A    %5D,%0A    line
+9E2124', // Tocco Red%0A      '#841B1D', // Tocco Red (darken 10%25)%0A      '#6B1617' // Tocco Red (darken 20%25)%0A    %5D,%0A    line: %5B%0A      '#9E2124', // Tocco Red%0A      '#841B1D', // Tocco Red (darken 10%25)%0A      '#6B1617' // Tocco Red (darken 20%25)%0A    %5D,%0A    fillContrast
 : %5B%0A
@@ -1288,28 +1288,25 @@
  '#F
-57C00
+AFAFA
 ', // 
-Orange 70
+Grey 5
 0%0A  
@@ -1315,58 +1315,54 @@
   '#
-EF6C00', // Orange 800%0A      '#E65100' // Orange 9
+F5F5F5', // Grey 100%0A      '#EEEEEE' // Grey 2
 00%0A 

use Tocco red as primary color