@layer reset, base, components, page, utilities;

/* nemcai design system. Always dark. Square corners. Everything sits on an 8px unit. */
:root {
  color-scheme: dark;

  /* color */
  --bg: #000;
  --fg: #fff;
  --fg-2: rgb(255 255 255 / 0.6);   /* secondary text */
  --fg-3: rgb(255 255 255 / 0.32);  /* tertiary, placeholders, ticks */
  --line: rgb(255 255 255 / 0.16);  /* borders, rules */
  --down: #ff3b30;                  /* the only color: something is down */

  /* type */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-xl: 1.5rem;
  --text-display: clamp(2.5rem, 8vw, 5rem);
  --tracking-wide: 0.12em;
  --tracking-tight: -0.04em;

  /* space: multiples of the unit */
  --u: 8px;
  --s1: calc(var(--u) * 1);
  --s2: calc(var(--u) * 2);
  --s3: calc(var(--u) * 3);
  --s4: calc(var(--u) * 4);
  --s6: calc(var(--u) * 6);
  --s8: calc(var(--u) * 8);
  --s12: calc(var(--u) * 12);
  --s16: calc(var(--u) * 16);

  /* grid */
  --frame: 1280px;
  --margin: var(--s6);
  --gutter: var(--s3);
  --cols: 12;

  /* controls */
  --control-h: var(--s6);
  --border: 1px solid var(--line);
  --focus: 1px solid var(--fg);

  --ease: 120ms ease-out;

  @media (max-width: 720px) {
    --margin: var(--s2);
    --gutter: var(--s2);
  }
}