/* ==========================================================================
   Tokens — fonts, colours (light / dark), spacing, easing
   Colours use light-dark(): the value picked follows `color-scheme`,
   which is driven by <html data-theme="light|dark">.
   ========================================================================== */

@font-face {
  font-family: "Overused Grotesk";
  src: url("../fonts/OverusedGrotesk-Roman.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("../fonts/OverusedGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /*                    light                     dark                        */
  --bg:              light-dark(#fff,                   #111112);
  --ink:             light-dark(#161618,                #ededee);
  --black:           light-dark(#0f0e0e,                #ededee);
  --muted:           light-dark(#999,                   #707074);
  --ink-40:          light-dark(rgba(22, 22, 24, 0.4),  rgba(237, 237, 238, 0.4));
  --fill-04:         light-dark(rgba(22, 22, 24, 0.04), rgba(237, 237, 238, 0.06));
  --fill-05:         light-dark(rgba(22, 22, 24, 0.05), rgba(237, 237, 238, 0.07));
  --fill-08:         light-dark(rgba(22, 22, 24, 0.08), rgba(237, 237, 238, 0.12));
  --tab:             light-dark(rgba(15, 14, 14, 0.1),  rgba(237, 237, 238, 0.1));
  --tab-text:        light-dark(rgba(15, 14, 14, 0.5),  rgba(237, 237, 238, 0.5));
  --tab-hover:       light-dark(rgba(15, 14, 14, 0.16), rgba(237, 237, 238, 0.16));
  --tab-hover-text:  light-dark(rgba(15, 14, 14, 0.8),  rgba(237, 237, 238, 0.85));
  --tab-active-text: light-dark(#fff,                   #111112);
  --rule:            light-dark(rgba(0, 0, 0, 0.2),     rgba(255, 255, 255, 0.22));
  --selection:       light-dark(#161618,                #ededee);
  --selection-text:  light-dark(#fff,                   #111112);
  --ring:            light-dark(transparent,            rgba(255, 255, 255, 0.08));

  --header-h: 69px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (max-width: 720px) {
  :root { --header-h: 58px; }
}