/* reset */
html, body, section, nav, article, aside, h1, h2, h3,
h4, h5, h6, hgroup, header, footer, address, p, hr, pre,
blockquote, ol, ul, li, dl, dt, dd, figure, figcaption,
div, table, caption, form, fieldset {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: light dark;
  --type-mono: monospace;
  --type-display: ui-sans-serif, system-ui, sans-serif;
  --type-body: ui-sans-serif, system-ui, sans-serif;
  
  --border-radius: 4px;

  --red: oklch(0.6633 0.2236 28.29);
  --orange: oklch(0.7824 0.171055 67.2231);
  --yellow: oklch(0.8849 0.1805 94.78);
  --green: oklch(0.7701 0.2243 144.97);
  --mint: oklch(0.8042 0.1013 191.35);
  --teal: oklch(0.7733 0.0926 217.26);
  --cyan: oklch(0.7865 0.1184 228.08);
  --blue: oklch(0.6243 0.205577 255.4861);
  --indigo: oklch(0.5564 0.2032 278.15);
  --purple: oklch(0.656 0.2274 312.42);
  --pink: oklch(0.6577 0.2317 16.02);
  --brown: oklch(0.665 0.0637 72.95);
  --grey: oklch(0.6812 0.0073 286.21);

  --black: oklch(0 0 0);
  --white: oklch(0.997 0 0);
  
  --xl-title1: bold 3rem/1.17 var(--type-display);       /* 48px */
  --xl-title2: bold 2.375rem/1.21 var(--type-display);   /* 38px */
  --lg-title: bold 1.8125rem/1.31 var(--type-display);   /* 29px */
  --title1: bold 1.5rem/1.33 var(--type-display);        /* 24px */
  --title2: bold 1.375rem/1.27 var(--type-display);      /* 22px */
  --title3: bold 1.1875rem/1.26 var(--type-display);     /* 19px */
  --headline: bold 1.0625rem/1.29 var(--type-display);   /* 17px */
  --body: 500 1.0625rem/1.29 var(--type-body);           /* 17px */
  --callout: 600 0.9375rem/1.33 var(--type-body);        /* 15px */
  --subheadline: normal 0.9375rem/1.33 var(--type-body); /* 15px */
  --footnote: 500 0.8125rem/1.38 var(--type-body);       /* 13px */
  --caption: 500 0.75rem/1.33 var(--type-body);          /* 12px */
  
  --ctrl: light-dark(var(--black),var(--white));
  
  --ctrl-idle: light-dark(
      color-mix(in oklch, var(--ctrl), white 93%),
      color-mix(in oklch, var(--ctrl), black 72%)
    );
  --ctrl-hover: light-dark(
      color-mix(in oklch, var(--ctrl), white 87%),
      color-mix(in oklch, var(--ctrl), black 57%)
    );
  --ctrl-active: light-dark(
      color-mix(in oklch, var(--ctrl), white 75%),
      color-mix(in oklch, var(--ctrl), black 45%)
    );
  --ctrl-disabled: oklch(from var(--ctrl-hover) l c h / 0.3);

  --ctrl-1: var(--ctrl);
  --ctrl-2: light-dark(
      color-mix(in oklch, var(--ctrl), white 82%),
      color-mix(in oklch, var(--ctrl), black 62%)
    );
  --ctrl-3: light-dark(
    color-mix(in oklch, var(--ctrl), white 52%),
    color-mix(in oklch, var(--ctrl), black 32%)
  );

  --ctrl-tint: var(--blue);
  --ctrl-tint-idle: oklch(from var(--ctrl-tint) calc(l + 0.05) calc(c - 0.02) h);
  --ctrl-tint-hover: oklch(from var(--ctrl-tint) calc(l + 0.02) calc(c) calc(h + 2));
  --ctrl-tint-active: oklch(from var(--ctrl-tint) calc(l + 0.10) calc(c - 0.05) calc(h - 5));
  --ctrl-tint-disabled: oklch(from var(--ctrl-tint-hover) l c h / 0.3);
  
  --ctrl-tint-1: color-mix(in oklch, var(--ctrl-tint), white 95%);
  --ctrl-tint-2: oklch(from var(--ctrl-tint) calc(l - 0.1) calc(c + 0.1) calc(h - 100));
  --ctrl-tint-3: oklch(from var(--ctrl-tint) calc(l - 0.2) calc(c + 0.2) h);
  
  --ctrl-3-disabled: oklch(from var(--ctrl) l c h / 0.3);

  --ctrl-complement: oklch(from var(--ctrl-tint) l c calc(h + 180));
  --ctrl-text2: linear-gradient(0deg, #545454 0%, #545454 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.23) 0%, rgba(255, 255, 255, 0.23) 100%);
  --ctrl-text2-blend: color-dodge, lighten;
}

#complement {
  display:block;
  width:100px;
  height:100px;
  background-color:var(--ctrl-complement);
}

#text2 {
  display:block;
  width:100px;
  height:100px;
  background: var(--ctrl-text2);
  background-color: var(--ctrl-tint);
  background-blend-mode: var(--ctrl-text2-blend);
}

/* typography and color */
html {
  font-size: 18px;
}

@media (width <= 799px) {
  html {
    font-size: 16px;
  }
}

body {
  font: var(--body);
  background-color: light-dark(var(--white), var(--black));
  color: light-dark(var(--black), var(--white));

  /* turn on common ligatures, old-style numerals and kerning */
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

/* heading */
h1, h2, h3, h4, h5, h6 {
  font-variant-numeric: lining-nums;
}

h1 { font: var(--xl-title1) }
h2 { font: var(--xl-title2) }
h3 { font: var(--lg-title) }
h4 { font: var(--title1) }
h5 { font: var(--title2) }
h6 { font: var(--title3) }

/* hyperlink: LVFHA */
a, a:link, a:visited, a:hover, a:active {
  color: light-dark(var(--black), var(--white));
  text-decoration: none;
}

a:visited { color: var(--purple); }

a:hover, a:active {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

/* use real small caps for abbr */
abbr {
  hyphens: manual;
  text-transform: lowercase;
  font-variant-caps: all-small-caps;
}

.caps { letter-spacing: 0.05em; } /* add 5% spacing */

/* proper subscripts and superscripts */
sub, sup {
  vertical-align: inherit;
  font-size: inherit;
}
sub { font-variant-position: sub; }
sup { font-variant-position: super; }

/* set a comfortable reading measure for p, blockquote */
p, blockquote { max-width: 38em; }

/* turn on automatic hyphenation */
p {
  margin-top: 0;
  hyphens: auto;
  hyphenate-limit-lines: 2;
  hyphenate-limit-chars: 6 3 2;
  hyphenate-limit-zone: 8%;
  hyphenate-limit-last: always;
}

blockquote {
  margin-left: 1em;
  
  p {
    font-style: italic;
    margin-bottom: 0;
  }
  
  footer { text-align: right; }
}

.quoted p {
  quotes: '“' '”' '‘' '’';
  
  &:before {
    content: open-quote;
    margin-left: -0.83ch; /* adjust */
  }
  
  &:after {
    content: close-quote;
  }
}

/* list */
ul, ol { margin-bottom: 1em; }

p:has(+ul), p:has(+ol),
ul:has(+p), ol:has(+p) {
  margin-bottom: 0.5em;
}

li ul, li ol { margin-bottom: 0; }
ul { padding-left: 1em; }
ol { padding-left: revert; }

hr {
  height: 0;
  margin: 0;
  margin-bottom: 1em;
  border-color: rgba(0, 0, 0, 0.12);
  border-width: 1px 0 0;
  box-sizing: content-box;
}

@custom-media --mobile (width <= 799px);
@custom-media --tablet (800px <= width <= 1279px);
@custom-media --desktop (width >= 1280px);