:root {
  color-scheme: light dark;
  
  --system-font: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  
  --light: 300;
  --regular: 300;
  --semibold: 500;
  --bold: 700;
  --heavy: 800;
  
  --small: 0.85rem;
  
  --fillet: 4px;
  --round: 0.5rem;
  --blend: 1rem;
  
  --cyan: 210;
  --sky: 230;
  --blue: 250;
  --violet: 290;
  --purple: 290;
  --red: 0;
  --yellow: 100;
  --glow: 110;
  --green: 170;
      
  --ewe: oklch(58% 0.35 var(--cyan));  
  --night: oklch(30% 0.12 var(--sky));
  --shine: oklch(45% 0.12 var(--sky));
  
  --text-ui: oklch(36.5% 0.09 var(--cyan));
  --text-0: var(--night);
  --text-1: oklch(70% 0.02 var(--cyan));
  --text-2: oklch(85% 0.02 var(--cyan));
  --text-neg: white;
  --text-green: oklch(75% 0.2 var(--green));
  --link: oklch(35% 0.35 var(--cyan));
  --visited: oklch(25% 0.35 var(--purple));
  
  --canvas-0: white;
  --canvas-1: oklch(95% 0.01 var(--blue));
  --canvas-11: oklch(99% 0.01 var(--blue));
  --canvas-2: oklch(95% 0.005 var(--blue));
  --canvas-5: oklch(45% 0.2 var(--cyan));
  --canvas-6: oklch(65% 0.25 var(--cyan));
  --canvas-neg: var(--night);
  --canvas-black: oklch(30% 0.2 var(--cyan));
  
  --panel: var(--night);
  --panel-shine: var(--shine);
  
  --border-0: oklch(75% 0.02 var(--blue));
  --border-1: oklch(85% 0.02 var(--blue));
  --border-2: oklch(30% 0.2 var(--cyan));
  --shadow-0: oklch(50% 0.05  var(--violet));
  --shadow-1: oklch(95% 0.2 var(--glow));
  
  --note-border: oklch(65% 0.37 var(--cyan));
  --note-label: oklch(45% 0.37 var(--cyan));
  --note-canvas: oklch(98% 0.03 var(--cyan));
  --tip-border: oklch(65% 0.37 var(--green));
  --tip-label: oklch(45% 0.37 var(--green));
  --tip-canvas: oklch(98% 0.03 var(--green));
  --caution-border: oklch(85% 0.37 var(--yellow));
  --caution-label: oklch(55% 0.37 var(--yellow));
  --caution-canvas: oklch(98% 0.03 var(--yellow));
  --warning-border: oklch(85% 0.37 var(--yellow));
  --warning-label: oklch(55% 0.37 var(--yellow));
  --warning-canvas: oklch(98% 0.03 var(--yellow));
  --important-border: oklch(65% 0.37 var(--violet));
  --important-label: oklch(35% 0.37 var(--violet));
  --important-canvas: oklch(98% 0.03 var(--violet));
  
  --gradient-0: radial-gradient(farthest-corner at 30% 0%, var(--panel-shine), var(--panel));
  --gradient-5: linear-gradient(to right, var(--canvas-1), var(--canvas-11), var(--canvas-1), var(--canvas-11), var(--canvas-1));
  
  --margin: 3rem;
  --max: 72rem;
  --lr-min: 0.75rem;
  --lr-max: 3rem;
}