body {
  --color-cdle-white: #ffffff;
  --color-cdle-shallow: #fcfcfc;
  --color-cdle-0: #f0f6fa;
  --color-cdle-5: #e3eef6;
  --color-cdle-10: #d9e7f1;
  --color-cdle-15: #cfdfe9;
  --color-cdle-20: #c6d7e2;
  --color-cdle-25: #bccfdd;
  --color-cdle-30: #b2c6d5;
  --color-cdle-35: #abbfcd;
  --color-cdle-40: #a0b6c5;
  --color-cdle-45: #96adbc;
  --color-cdle-50: #8da4b3;
  --color-cdle-55: #7f97a7;
  --color-cdle-60: #7a92a2;
  --color-cdle-65: #6a8293;
  --color-cdle-70: #5f7787;
  --color-cdle-75: #546c7c;
  --color-cdle-80: #496170;
  --color-cdle-85: #3e5462;
  --color-cdle-90: #344653;
  --color-cdle-95: #293842;
  --color-cdle-100: #1c242a;
  --color-cdle-deep: #0b0b0b;
  --color-cdle-black: #000000;

  --ring: var(--color-cdle-60);
  --primary-background: var(--color-cdle-75);
  --primary-background-accent: var(--color-cdle-80);
  --primary-foreground: var(--color-cdle-0);
  --primary-foreground-accent: var(--color-cdle-shallow);
  --primary-soft-background: var(--color-cdle-30);
  --primary-soft-background-accent: var(--color-cdle-35);
  --primary-soft-foreground: var(--color-cdle-95);
  --primary-soft-foreground-accent: var(--color-cdle-100);
  --primary-shim-background: var(--color-cdle-0);
  --primary-shim-background-accent: var(--color-cdle-5);
  --primary-border: var(--color-cdle-70);
  --primary-border-accent: var(--color-cdle-80);
  --primary-ring: var(--color-cdle-75);
  --primary-standalone: var(--color-cdle-80);
  --primary-standalone-accent: var(--color-cdle-90);
  --primary-standalone-emphasis: var(--color-cdle-100);
}