@property --_tint {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --_ring {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --_ring-color {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

:root {
  --background: 15, 16, 16;
  --text: 218, 220, 224;
  --primary: 77 254 154;

  --bg-a: #0f1010;
  --bg-b: #181a1a;
  --bg-c: #1f2121;
  --bg-d: #2a2c2c;
  --bg-e: #3a3c3c;

  --text-focus: #ffffff;
  --text-dim: #abaeb8;
  --text-dark: #5a6060;
  --text-darker: #4d5353;

  --border: #d4d8ea1a;
  --border-soft: #d4d8ea14;
  --border-strong: #d4d8ea2e;
  --border-offset-shadow: inset 0 0 0 1px var(--border);

  --primary-hex: #4dfe9a;
  --primary-press: #38d588;
  --danger: #fe4d4d;
  --danger-soft: #ff8f8f;
  --underline: rgba(var(--text), 0.34);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --surface-texture: url("/assets/img/grain.png");
  --surface-texture-size: 372px 84px;

  --shadow-sm: 0 1px 2px #0000006b;
  --shadow-md: 0 10px 30px #00000047;
  --shadow-lg: 0 14px 28px #0000008c;
  --shadow-inset-lip: inset 0 -2px #14161354;

  --duration-fast: 80ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-drop: cubic-bezier(0.22, 1.45, 0.36, 1);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  scrollbar-gutter: stable;
}

:where(a, button, input, textarea, select, summary, [tabindex]) {
  outline: var(--_ring) solid var(--_ring-color);
  outline-offset: 3px;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  --_ring: 2px;
  --_ring-color: rgb(var(--primary) / 0.7);
}