calque/src/app.css

:root {
  --hue: 182.77deg;
  --accent-ofset: 180;

  --primary-100: oklch(from var(--primary-500) .95 c h);
  --primary-300: oklch(from var(--primary-500) .9 c h);
  --primary-500: light-dark(oklch(.7503 0.117 var(--hue)), oklch(.8549 0.1149 var(--hue)));
  --primary-600: oklch(from var(--primary-500) .7 c h);
  --primary-700: oklch(from var(--primary-500) .6 c h);
  --primary-900: oklch(from var(--primary-500) .35 calc(c + .15) h);

  --secondary-100: oklch(from var(--primary-500) .95 c calc(h + var(--accent-ofset)));
  --secondary-300: oklch(from var(--primary-500) .9 c calc(h + var(--accent-ofset)));
  --secondary-500: oklch(from var(--primary-500) .85 c calc(h + var(--accent-ofset)));
  --secondary-600: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
  --secondary-700: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
  --secondary-900: oklch(from var(--primary-500) .35 calc(c + .15) calc(h + var(--accent-ofset)));

  --surface-300: light-dark(oklch(from var(--primary-500) .9 .02 h), oklch(from var(--primary-500) .2 .02 h));
  --surface-400: oklch(from var(--surface-300) calc(l + .025) c h);
  --surface-500: oklch(from var(--surface-400) calc(l + .025) c h);
  --surface-600: oklch(from var(--surface-500) calc(l + .025) c h);
  --surface-700: oklch(from var(--surface-600) calc(l + .025) c h);

  --info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249));
  --fail: light-dark(oklch(.64 .21 25.3), oklch(.64 .21 25.3));
  --warn: light-dark(oklch(.82 .18 78.9), oklch(.82 .18 78.9));
  --succ: light-dark(oklch(.86 .28 150), oklch(.86 .28 150));

  --text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h));
  --text-2: oklch(from var(--text-1) calc(l + .1) c h);

  --text-lighter: 100;
  --text-light: 300;
  --text-normal: 500;
  --text-bold: 700;
  --text-bolder: 900;

  --text-s: .8rem;
  --text-m: 1rem;
  --text-l: 1.25rem;
  --text-xl: 1.6rem;
  --text-xxl: 2rem;

  --radii-s: .125em;
  --radii-m: .25em;
  --radii-l: .5em;
  --radii-xl: 1em;

  --padding-xs: .125em;
  --padding-s: .25em;
  --padding-m: .5em;
  --padding-l: .75em;
  --padding-xl: 1em;
  --padding-xxl: 1.5em;

  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;

  --shadow-1: 0 1px 2px -1px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-2:
    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --shadow-3:
    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-4:
    0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
  --shadow-5:
    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-6:
    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
    0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
}

html {
  inline-size: 100%;
  block-size: 100%;
  overflow: clip;
}

body {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: clip;

  display: grid;
  grid: 100% / 100%;

  background-color: var(--surface-300);
  color: var(--text-2);
  accent-color: var(--primary-500);

  margin: 0;

  font-family: sans-serif;

  * {
    box-sizing: border-box;

    &:focus-visible {
      outline: 1px solid var(--info);
    }
  }
}

a {
  color: var(--primary-900);

  &:visited {
    color: var(--secondary-900);
  }
}

h1 {
  color: var(--text-1);
  text-transform: uppercase;
  font-size: 4rem;
  font-weight: 100;
  line-height: 1.1;
}

p {
  line-height: 1.35;
  margin: 0;
}

code {
  padding-inline: var(--padding-s);
  background-color: var(--surface-500);
  border: 1px solid var(--surface-700);
  border-radius: var(--radii-m);
}

ins {
  background-color: oklch(from var(--succ) l c h / .1);
  color: oklch(from var(--succ) .1 .2 h);
}

del {
  background-color: oklch(from var(--fail) l c h / .1);
  color: oklch(from var(--fail) .1 .2 h);
}

kbd {
  background-color: var(--surface-600);
  border-radius: var(--radii-m);
  border: 1px solid var(--surface-500);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: var(--text-2);
  display: inline-block;
  font-size: var(--text-s);
  font-weight: var(--text-bold);
  line-height: 1;
  padding: var(--padding-xs) var(--padding-s);
  white-space: nowrap;
}

samp {
  display: inline-block;
}

@property --hue {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}