@use 'sass:color';

$gray-0: oklch(100% 0 0);
$gray-1: oklch(90% 0 0);
$gray-2: oklch(80% 0 0);
$gray-3: oklch(70% 0 0);
$gray-4: oklch(60% 0 0);
$gray-5: oklch(50% 0 0);
$gray-6: oklch(40% 0 0);
$gray-7: oklch(30% 0 0);
$gray-8: oklch(20% 0 0);
$gray-9: oklch(10% 0 0);

$red-1: oklch(75% 0.4 030);
$orange-1: oklch(75% 0.4 090);
$green-1: oklch(75% 0.4 150);
$cyan-1: oklch(75% 0.4 210);
$blue-1: oklch(75% 0.4 270);
$magenta-1: oklch(75% 0.4 330);

$red-2: oklch(75% 0.2 030);
$orange-2: oklch(75% 0.2 090);
$green-2: oklch(75% 0.2 150);
$cyan-2: oklch(75% 0.2 210);
$blue-2: oklch(75% 0.2 270);
$magenta-2: oklch(75% 0.2 330);

$text-color: $gray-1;
$background-color: $gray-7;
$light2-background-color: color.adjust($background-color, $lightness: 10%);
$light-background-color: color.adjust($background-color, $lightness: 5%);
$dark-background-color: color.adjust($background-color, $lightness: -5%);
$dark2-background-color: color.adjust($background-color, $lightness: -10%);

$cursor-tick: $gray-0;
$time-tick: $gray-1;
$grid-line: $gray-1;
$major-tick: $gray-4;
$minor-tick: $gray-5;

$text-font: Helvetica, sans-serif;
$large-text-size: 20px;
$normal-text-size: 16px;
$small-text-size: 12px;

$monospace-text-font: Monaco, monospace, monospace;
$normal-monospace-text-size: 12px;
$small-monospace-text-size: 10px;

$colors: (
    $red-1,
    $green-1,
    $blue-1,
    $orange-1,
    $cyan-1,
    $magenta-1,
    $red-2,
    $green-2,
    $blue-2,
    $orange-2,
    $cyan-2,
    $magenta-2
);