/* ==========================================================================
   LAZZYENGINEER (2023) - DESIGN TOKENS & HSL SCALE
   ========================================================================== */

:root {
  --fonts-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --fonts-mono: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, monospace;
  --fonts-serif: Georgia, serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  --radii-1: 4px;
  --radii-2: 8px;
  --radii-3: 12px;
  --radii-round: 9999px;

  --shadows-small: 0 5px 10px rgba(0, 0, 0, 0.12);
  --shadows-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadows-large: 0 30px 60px rgba(0, 0, 0, 0.12);
  --shadows-tooltip: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
  --transitions-snappy: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transitions-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.light, :root:not(.dark) {
  --colors-bg: #FFFFFF;
  --colors-lowContrast: #FFFFFF;
  --colors-highContrast: #000000;
  --colors-focus: hsl(39, 100%, 57%);
  --colors-grid: hsl(0, 0%, 78%);

  --colors-gray1: hsl(0, 0%, 99.0%);
  --colors-gray2: hsl(0, 0%, 97.3%);
  --colors-gray3: hsl(0, 0%, 95.1%);
  --colors-gray4: hsl(0, 0%, 93.0%);
  --colors-gray5: hsl(0, 0%, 90.9%);
  --colors-gray6: hsl(0, 0%, 88.7%);
  --colors-gray7: hsl(0, 0%, 85.8%);
  --colors-gray8: hsl(0, 0%, 78.0%);
  --colors-gray9: hsl(0, 0%, 56.1%);
  --colors-gray10: hsl(0, 0%, 52.3%);
  --colors-gray11: hsl(0, 0%, 43.5%);
  --colors-gray12: hsl(0, 0%, 9.0%);

  --colors-grayA1: hsl(0 0% 0% / 0.012);
  --colors-grayA2: hsl(0 0% 0% / 0.027);
  --colors-grayA3: hsl(0 0% 0% / 0.047);
  --colors-grayA4: hsl(0 0% 0% / 0.071);
  --colors-grayA5: hsl(0 0% 0% / 0.090);
  --colors-grayA6: hsl(0 0% 0% / 0.114);
  --colors-grayA7: hsl(0 0% 0% / 0.141);
  --colors-grayA8: hsl(0 0% 0% / 0.220);
  --colors-grayA9: hsl(0 0% 0% / 0.439);
  --colors-grayA10: hsl(0 0% 0% / 0.478);
  --colors-grayA11: hsl(0 0% 0% / 0.565);
  --colors-grayA12: hsl(0 0% 0% / 0.910);

  --colors-amber9: hsl(39, 100%, 57.0%);
  --colors-amber11: hsl(30, 100%, 34.0%);
  --colors-teal3: hsl(170, 76.1%, 9.2%);
  --colors-teal9: hsl(173, 80.0%, 36.0%);
  --colors-teal11: hsl(174, 90.0%, 25.2%);
  --colors-blue9: hsl(206, 100%, 50.0%);
  --colors-blue11: hsl(211, 100%, 43.2%);
  --colors-green9: hsl(151, 55.0%, 41.5%);
  --colors-green11: hsl(153, 67.0%, 28.5%);
  --colors-red: #ff334b;
  --dock-bg: #FFFFFF;
}

.dark {
  --colors-bg: #000000;
  --colors-lowContrast: #000000;
  --colors-highContrast: #FFFFFF;
  --colors-focus: var(--colors-amber9);
  --colors-grid: var(--colors-gray8);

  --colors-gray1: hsl(0, 0%, 8.5%);
  --colors-gray2: hsl(0, 0%, 11.0%);
  --colors-gray3: hsl(0, 0%, 13.6%);
  --colors-gray4: hsl(0, 0%, 15.8%);
  --colors-gray5: hsl(0, 0%, 17.9%);
  --colors-gray6: hsl(0, 0%, 20.5%);
  --colors-gray7: hsl(0, 0%, 24.3%);
  --colors-gray8: hsl(0, 0%, 31.2%);
  --colors-gray9: hsl(0, 0%, 43.9%);
  --colors-gray10: hsl(0, 0%, 49.4%);
  --colors-gray11: hsl(0, 0%, 62.8%);
  --colors-gray12: hsl(0, 0%, 93.0%);

  --colors-grayA1: hsl(0 0% 100% / 0);
  --colors-grayA2: hsl(0 0% 100% / 0.026);
  --colors-grayA3: hsl(0 0% 100% / 0.056);
  --colors-grayA4: hsl(0 0% 100% / 0.077);
  --colors-grayA5: hsl(0 0% 100% / 0.103);
  --colors-grayA6: hsl(0 0% 100% / 0.129);
  --colors-grayA7: hsl(0 0% 100% / 0.172);
  --colors-grayA8: hsl(0 0% 100% / 0.249);
  --colors-grayA9: hsl(0 0% 100% / 0.386);
  --colors-grayA10: hsl(0 0% 100% / 0.446);
  --colors-grayA11: hsl(0 0% 100% / 0.592);
  --colors-grayA12: hsl(0 0% 100% / 0.923);

  --colors-amber9: hsl(39, 100%, 57.0%);
  --colors-amber11: hsl(39, 90.0%, 49.8%);
  --colors-teal3: hsl(170, 76.1%, 9.2%);
  --colors-teal9: hsl(173, 80.0%, 36.0%);
  --colors-teal11: hsl(174, 90.0%, 40.7%);
  --colors-blue9: hsl(206, 100%, 50.0%);
  --colors-blue11: hsl(210, 100%, 66.1%);
  --colors-green9: hsl(151, 55.0%, 41.5%);
  --colors-green11: hsl(151, 50.0%, 53.2%);
  --colors-red: #ff455d;
  --dock-bg: var(--colors-gray1);
}